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

时间:2016-11-05 13:42:57

标签: javascript vuejs2

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

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

例如,如果我选择"水果"选择显示水果,如果我选择"蔬菜"它展示了蔬菜。

3 个答案:

答案 0 :(得分:5)

我不使用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>
&#13;
&#13;
&#13;

答案 1 :(得分:3)

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

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

两个选项:

  1. 使用Computed属性
  2. 使用v-if显示不同的选择框。如果每个选择框具有不同的v模型
  3. ,这将是理想的

    计算财产

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

答案 2 :(得分:2)

使用纯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);