vuejs 2 v-for :key 不工作，html 被替换？

Question

我正在 v-for

中渲染一些 HTML

但每次我更改任何数据时，我的所有 html 都会被替换（输入字段丢失其值）

我尝试给 :key 各种不同的值

我在 vue v1 中没有这个问题，只有在 v2 中

http://jsbin.com/jomuzexihu/1/edit?html,js,output

Answer 1

我对此进行了一些尝试，看起来 Vue 在使用 <input /> 或如果您使用 component 时不会重新呈现整个列表，但它会使用 v-html.下面是用于比较的 fiddle：

https://jsfiddle.net/cxataxcf/

此处实际上不需要密钥，因为列表未重新排序，因此您的问题与 :key 无关，而与 v-html 有关。这是文档对 v-html:

的描述

The contents are inserted as plain HTML - data bindings are ignored. Note that you cannot use v-html to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.

所以我想这就是问题所在。

可能值得在 Vue 的 github 页面上提出一个问题，看看这是否是 v-html 的预期行为，但 Vue 2.0 比 vue [=46] 更注重组件=] 并且似乎不建议使用 v-html，因此可能只是您需要重构代码以改为使用组件。

编辑

这个问题的解决方案是简单地将代码包装在一个组件中并将 HTML 作为 prop 传递：

Vue.component('unknown-html', {
  props: {
    html: ""
  },
  template: '<div><div v-html="html"></div>'
})

标记：

  <unknown-html :html="thing.html"></unknown-html>

和视图模型：

var app = new Vue({
  el: '#app',
  data: {
    numInputs: 1,
    stuff: [{
      'html':'<input />'
    }, {
      'html':'<button>Foo</button>'
    }]
  }
})

这是 JSFiddle：https://jsfiddle.net/wrox5acb/

Answer 2

您正在尝试将原始 html 直接注入 DOM。可能在Vue.js的早期版本中是可能的，但绝对不是推荐的方式。

您可以改为拥有一个对象数组并将其绑定到 html，如以下 jsFiddle 所示：https://jsfiddle.net/43xz6xqz/

Vue.js版本：2.0.3

在上面的示例中，vue.js 负责创建 input 元素并使用 v-model 将这些 input 元素绑定到对象值。

要提取这些值，您可以使用示例代码中所示的 computed 属性。

Answer 3

我想，为了性能优化，当 key 没有改变时，Vue 不会重新渲染 dom，但是当你的输入元素通过一个导入时，Vue 会通过 directive.So 更新数据导入指令（v-html），每次内容更改时都会重新呈现。

由于vue不是字符串模板引擎，而是基于dom的模板，所以在@craig_h的例子中，要使用incomming html在组件内的字符串模板中：

Vue.component('unknown-html', {
   props: {
     html: ""
   },
   template: '<div><div v-html="html"></div>'
})  

view:
<unknown-html :html="thing.html"></unknown-html>

所以当东西改变时，它不会重新渲染在字符串中声明的模板，因为vue不是字符串模板引擎。

vuejs 2 v-for :key 不工作，html 被替换？

vuejs 2 v-for :key not working, html being replaced?

vue.js