javascript - vue2表单元素列表

Question

我有一堆字段想要显示为长表单，每个字段都允许用户从该字段的值列表中进行选择。

所以基本的事情是这样的:

Vue.component('master-field', require('./Vue/MasterField').default);

new Vue({
    store,
    el: '#app',
    computed: {
        sourceFields: function () {
            return store.getters.visibleSource
        }
    }
})

然后在页面中，它使用 sourceFields 数据逐一吐出字段:

<div id="app">
    <div class="container-fluid">
        <master-field v-for="item in sourceFields" :key="item.id"></master-field>
    </div>
</div>

如何从 master-field 组件中访问 item.id？如果我尝试从组件中的 mounted Hook 执行 console.log(item.id) ，它会说 item 未定义。

Answer 1

你必须通过 props 来传递它。 Props Documentation

伪示例:

<my-component :info="someInfo" />

然后在组件中:

Vue.component('myComponent', {
  // declare the props
  props: ['info'],
  template: '<span>{{ info }}</span>'
})