动态更改vuejs 2中的选择输入选项

Question

如何动态更改选择下拉列表v模型中的选项？

我有2个选择输入，一个应该根据其他输入改变。

例如，如果我选择＆＃34;水果＆＃34;选择显示水果，如果我选择＆＃34;蔬菜＆＃34;它展示了蔬菜。

Answer 1

我不使用Vuejs，但在查看文档之后：

＆＃13;

＆＃13;

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)
         }
       }
})

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

其他答案并非真正的“Vue”答案。

如何处理这取决于您要对选择框执行的操作。我假设您将处理表单上的输入。

两个选项：

1. 使用Computed属性
2. 使用v-if显示不同的选择框。如果每个选择框具有不同的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>

Answer 3

使用纯javascript

filter

var obj_array = [{
        "DATA_ID": 1,
        "DATA_NAME": "Dim",
        "DATA_BB_TYP": 2,
        "DATA_MAC": "5474",
    },
    {
        "DATA_ID": 3,
        "DATA_NAME": "Spre",
        "DATA_BB_TYP": 33,
        "DATA_MAC": "8e30",
    },
    {
        "DATA_ID": 2,
        "DATA_NAME": "Dimb",
        "DATA_BB_TYP": 2,
        "DATA_MAC": "45e8",
    },
    {
        "DATA_ID": 4,
        "DATA_NAME": "Kht1",
        "DATA_BB_TYP": 35,
        "DATA_MAC": "58d0",
    },
    {
        "DATA_ID": 6,
        "DATA_NAME": "Sens",
        "DATA_BB_TYP": 34,
        "DATA_MAC": "d004",
    }
];

var retained = [2, 34];

for(var i = obj_array.length - 1; i >= 0; i--) {
  var obj = obj_array[i];
  if(retained.indexOf(obj.DATA_BB_TYP) === -1) {
    obj_array.splice(i, 1);
  }
}

console.log(obj_array);