我在v-for中呈现了一些HTML
但是每当我更改任何数据时，我的所有html都会被替换（输入字段会丢失它们的值）
我尝试给出：键各种不同的值
我在vue v1中没有遇到此问题，仅在v2
中答案 0 :(得分：5)
我对此进行了一些游戏，看起来Vue在使用<input />时没有重新呈现整个列表，或者如果您使用component但是它与v-html一起使用。这是比较的小提琴：
https://jsfiddle.net/cxataxcf/
此处实际不需要密钥，因为列表未重新排序，因此您的问题与: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/
答案 1 :(得分：1)
您正在尝试将原始html直接注入DOM。可能在早期版本的Vue.js中有可能，但绝对不是推荐的方式。
您可以使用一个对象数组并将其绑定到html，如此jsFiddle所示：https://jsfiddle.net/43xz6xqz/
Vue.js版本：2.0.3
在上面的示例中，vue.js负责创建input元素，并使用input将这些v-model元素绑定到对象值。
要提取这些值，您可以使用computed属性，如示例代码所示。
答案 2 :(得分：0)
我想，对于性能优化，当密钥没有改变时，Vue不会重新渲染dom，而是会通过指令更新数据导入。当你的输入元素通过指令（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不是字符串模板引擎。