动态更改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>