動態更改vuejs中的選擇輸入選項2

Question

如何動態更改選擇下拉v模型中的選項？

我有2個選擇輸入，一個應該根據其他變化。

例如，如果我選擇「水果」選擇顯示水果，如果我選擇「蔬菜」它顯示蔬菜。

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>

Answer 3

其他答案不是真的'Vue'的答案。

你如何處理這取決於你想用選擇框做什麼。我假設你會處理表單上的輸入。

兩個選項：

1. 使用計算屬性
2. 使用v-是否顯示不同的選擇框。如果每個選擇框都有不同的V型

計算屬性

<template> 
<div class="container"> 
    <select id="firstInput" v-model="selected"> 
     <option v-for="option in firstInputOptions" :value="option"> 
     {{ option }} 
     </option> 
    </select> 
    <select id="secondInput" v-model="secondInputSelected"> 
     <option v-for="option in secondInputOptions" :value="option"> 
     {{ option }} 
     </option> 
    </select> 
</div> <!-- /container --> 
</template> 

<script> 
export default { 
    computed: { 
    secondInputOptions(){ 
     return this.selected === 'fruit' ? this.fruit : this.vegetables 
    } 
    }, 
    data() { 
    return { 
     fruit: ['apple', 'banana', 'orange'], 
     vegetables: ['carrot', 'beet', 'celery'], 
     firstInputOptions: ['fruit', 'vegetables'] 
     selected: 'fruit', 
     secondInputSelected: '' 
    } 
    }, 
} 
</script> 

條件呈現

<template> 
<div class="container"> 
    <select id="firstInput" v-model="selected"> 
     <option v-for="option in firstInputOptions" :value="option"> 
     {{ option }} 
     </option> 
    </select> 
    <select id="secondInputFruit" v-model="selected" v-if="selected == 'fruit'"> 
     <option v-for="option in secondInputOptions" :value="option"> 
     {{ option }} 
     </option> 
    </select> 
    <select id="secondInputVegetables" v-model="vegetableSelected" v-else-if="selected == 'vegetables'"> 
     <option v-for="option in secondInputOptions" :value="option"> 
     {{ option }} 
     </option> 
    </select> 
</div> <!-- /container --> 
</template> 

<script> 
export default { 
    data() { 
    return { 
     fruits: ['apple', 'banana', 'orange'], 
     fruitSelected: '', 
     vegetables: ['carrot', 'beet', 'celery'], 
     vegetableSelected: '', 
     firstInputOptions: ['fruit', 'vegetables'] 
     selected: 'fruit' 
    } 
    }, 
} 
</script>