Question

我在弄清楚如何使用组件和道具时遇到了问题。

更具体地说，我正在尝试更新组件中的数据并让它更改组件。我有一个组件模板迭代的对象数组。我想更改该数组并将更改反映在组件中。

这是我的玩具示例：

<html>
<head>
    <script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
    <script src="assets/jquery-1.12.0.js"></script>
</head>

<body>
    <div id="app">
        <input id="opp-list-input" v-model="opportunityListVals" type="hidden">
        <br>
        <opportunitylist v-bind:opp-list="opportunityListVals"></opportunitylist>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                opportunityListVals: [{name: 'First Opportunity'},{name: 'Second Opportunity'}]
            },
            components: {
                opportunitylist: {
                    props: ['oppList'],
                    template: '<ul>'
+ '<li v-for="opp in oppList">'
+ '{{opp.name}}'
+ '</li>'
+ '</ul>'
                }
            }
        });
        $('#opp-list-input').val([{name: 'Third Opportunity'}]);
        $("#opp-list-input").change();
    </script>
</body>
</html>

我试图最终显示单个“第三机会”行，即使它已使用两个不同的值初始化。

当我运行它时，它会给我重复值警告并显示一些空子弹。我认为这意味着它没有像我期望的那样处理数组。

我在道具和组件方面走在正确的轨道上吗？

有没有更好的方法来处理这些对象。通过输入元素发送它似乎很奇怪，但我看到的每个例子都是这样做的。

Answer 1

以下是组件的代码。您只需使用:oppList="opportunityListVals"将该数组从父级传递给子级，而不是使用v-bind。当父数组更新时，子组件也将自动更新。

您还需要使用Vue.extend()来创建子组件，而不仅仅是发送对象。

<body>
<div id="app">
    <opportunitylist :oppList="opportunityListVals"></opportunitylist>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            opportunityListVals: [{name: 'First Opportunity'},{name: 'Second Opportunity'}]
        },
        components: {
            opportunitylist: Vue.extend({
                props: ['oppList'],
                template: '<ul>'
                    + '<li v-for="opp in oppList">'
                    + '{{opp.name}}'
                    + '</li>'
                    + '</ul>'
            })
        }
    });
</script>

我真的不明白你在输入和第三个值上做了什么，所以在我能在那里提供输入之前你必须澄清它。

了解组件和道具

1 个答案: