Как редактировать шаблон в зависимости от того, какие данные есть?

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 для перебора массива и создания новых опций.

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

Answer 2

Используйте 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>