<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/vue.js"></script>
<meta charset="UTF-8">
<title>V-for example</title>
</head>
<body>
<script type="x/template" id="testTemplate">
<div><h1>{{name}}</h1>
<p>{{Age}}</p></div>
</script>
<div id="example">
<div id="filler">
<template v-for="person in people">
<test-component name="{{person.name}}"></test-component>
</template>
</div>
</div>
<script>
var newComponent = Vue.extend({
template: '#testTemplate',
props: ['name'],
data: function () {
return {
Age: 1010
}
}
});
Vue.component('test-component', newComponent);
new Vue({
el: '#example',
data: {
people: [{
name: 'jason',
age: 15,
complete: true
}, {
name: 'Jeremy',
age: 20,
complete: false
}]
},
ready: function () {
var divoutput = document.querySelector('#filler');
alert(divoutput.innerHTML);
len = this.$data.people.length;
for (i = 0; i < len; i += 1) {
var nameT = this.$data.people[i].name;
divoutput.innerHTML += '<test-component name="' + nameT + '"></test-component>';
}
},
});
</script>
</body> </html>
我试图将 Vue 数据数组中的所有人员注入(inject)到组件中，并在 Vue.ready() 函数期间将其添加到 div 的innerHTML 中。我表明结果被注入(inject)到“填充”数组中，但它们本身的组件没有正确渲染。如果我为我的组件创建一个手动实例，它就可以正常工作。
最佳答案
您不应该尝试使用 innerHTML 添加 Vue 组件。那就是你自己管理 DOM，让 Vue 自己做就可以了。这是一个 fiddle :
https://jsfiddle.net/xccjsp4b/
我将脚本模板更改为 div，因为我不确定您是否可以像这样使用脚本标签(尽管我可能是错的)。然后，您只需使用 v-for 循环访问人员并将相关数据作为属性传递。如果每个人都有自己的年龄，您希望它是一个属性而不是数据变量。
此外，请使用 :name="person.name" 的简写绑定(bind)，而不是 name="{{person.name}}"。 : 告诉 Vue 计算表达式。
关于javascript - 尝试循环数组数据或 v-for 时，Vuejs 将无法正确渲染组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35728494/