vuejs 2 v-for:密钥不工作,html被替换？

Question

我在v-for中渲染了一些HTML

但是每当我更改任何数据时,我的所有html都会被替换(输入字段会丢失它们的值)

我尝试给出:键各种不同的值

我在vue v1中没有这个问题,仅在v2中

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

Answer 1

我有一点玩这个,看起来Vue在使用时没有重新渲染整个列表,<input />或者如果你使用了component它,但它确实如此v-html.这是比较的小提琴:

https://jsfiddle.net/cxat​​axcf/

实际上这里不需要密钥,因为列表没有被重新排序,所以你的问题与之无关,:key而是与之相关v-html.以下是文档所说的内容v-html:

内容作为纯HTML插入 - 忽略数据绑定.请注意,您不能使用v-html来组成模板部分,因为Vue不是基于字符串的模板引擎.相反,组件是UI重用和组合的基本单元.

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

可能值得在Vue的github页面上提出一个问题,看看这是否是预期的行为v-html,但是Vue 2.0比vue 1.x更关注组件并且似乎不推荐使用v-html,所以它可能只是您需要重新分解代码以使用组件.

编辑

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

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

标记:

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

而View模型:

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

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