javascript - 如何根据存在的数据编辑模板？

Question

我有一个创建 <select> 的 Vue 组件与 <option>秒。我希望选择中的选项依赖于列表。

Vue.component('column-header', {
    data: function() {
         return {
           options: ['Name', 'Address', 'Email', 'Mobile', 'Card Number', 'Other'],
         }
    },
    template: `<div class="uk-width-1-5">
                <select class="uk-select">
                    {{ options }}
                </select>
            </div>`
});

new Vue({ el: '#app' })

当我决定稍后扩展我的选项列表时，它应该会自动插入新项目作为选项。这是正确的做法吗？

Answer 1

使用 v-for 呈现元素列表:

<option v-for="option in options">{{option}}</option>

options data 属性是 react 性的，因此将项目添加到该数组会自动更新模板以包含新的 <option>在<select> .

Vue.component('column-header', {
    data: function() {
         return  {
           options: ['Name', 'Address', 'Email', 'Mobile', 'Card Number', 'Other'],
         }
    },
    template: `<div class="uk-width-1-5">
                <select class="uk-select">
                    <option v-for="option in options">{{option}}</option>
                </select>
                <button @click="addOption">Add option</button>
            </div>
            `,
  methods: {
    addOption() {
      this.options.push('Foo' + this.options.length);
    }
  }
});

new Vue({ el: '#app' })

<script src="https://unpkg.com/vue@2.6.6"></script>

<div id="app">
  <column-header></column-header>
</div>