Question

我有一个Vue组件，它用<select>个创建一个<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数据属性是反应性的，因此将项目添加到该数组将自动更新模板，以在<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>

Answer 2

您可以使用v-for遍历数组并创建新选项。

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

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

2 个答案: