Vuejs 在尝试遍历数组数据或 v-for 时无法正确呈现组件

Vuejs will not render component correctly when trying to loop thru array data or v-for

本文关键字：组件 v-for 遍历 数组 数据 Vuejs      更新时间：2023-09-26
        <!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 数据数组中的所有人注入到一个组件中，并在 Vue.ready（） 函数期间将其添加到div 的内部 HTML 中。我显示结果正在注入到"填充"数组中，但它们本身的组件没有正确渲染。如果我制作组件的手动实例，它可以正常工作。

你不应该尝试使用 innerHTML 添加 Vue 组件。 这是自己管理 DOM，让 Vue 自己做。 这是一个小提琴：

https://jsfiddle.net/xccjsp4b/

我将脚本模板更改为div，因为我不确定您可以像这样使用脚本标签（尽管我可能是错的）。 然后，您只需使用v-for来遍历人员并将相关数据作为属性传递。 如果每个人都有自己的年龄，您希望它是一个属性而不是数据变量。

此外，请使用 :name="person.name" 而不是 name="{{person.name}}" 的速记绑定。 :告诉 Vue 评估表达式。

相关文章：