javascript - vuejs 2 で選択入力オプションを動的に変更する

Question

選択ドロップダウン v-model のオプションを動的に変更する方法は?

私は 2 つの選択入力を持っています。1 つは他に応じて変更する必要があります。

たとえば、「果物」を選択すると果物が表示され、「野菜」を選択すると野菜が表示されます。

Answer 1

私は Vuejs を使用していませんが、ドキュメントを見た後:

var TypesArr = {
                Fruit: [{ text: 'Apple', value: 'Apple' }, { text: 'Orange', value: 'Orange' }, { text: 'Mango', value: 'Mango' }],
                Meat:  [{ text: 'Steak', value: 'Steak' }, { text: 'Pork', value: 'Pork' }]
               }


var selectTwo = new Vue({
    el: '#select2',
    data: {
           selected: TypesArr['Fruit'][0],
           options: TypesArr['Fruit']
       },
       methods: {
         update: function (value)
         {
             this.options = TypesArr[value]
         }
       }
})


new Vue({
    el: '#select1',
    data: {
           selected: 'Fruit',
           options: [ { text: 'Fruit', value: 'Fruit' }, { text: 'Meat', value: 'Meat' } ]
       },
       methods: {
         onChange: function (event)
         {
             selectTwo.update(event.srcElement.value)
         }
       }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<select v-on:change="onChange" id="select1">
    <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
    </option>
</select>

<select id="select2">
    <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
    </option>
</select>

Answer 2

純粋な JavaScript の使用

var typesArr = {fruit: ['Apple', 'Orange', 'Mango'], meat: ['Steak', 'Pork']}


function changeContext(value)
{
    if (typesArr.hasOwnProperty(value)) {
        var out = ''

        for (var i = 0; i < typesArr[value].length; i++) {
             out += '<option value="' + typesArr[value][i] + '">' + typesArr[value][i] + '</option>'
        }

        document.getElementById('select2').innerHTML = out
    }
}

changeContext('fruit')

<select onchange="changeContext(this.value)">
    <option value="fruit">Fruit</option>
    <option value="meat">Meat</option>
</select>

<select id="select2"></select>