gpt4 book ai didi

vue.js - 即时动态创建选择选项

转载 作者:搜寻专家 更新时间:2023-10-30 22:32:20 24 4
gpt4 key购买 nike

我有 2 个选择,一个有数据,另一个为空。当第一个被选中时,我使用开关捕捉它。现在,根据值,我想创建选项元素并将它们放在空选择中。

假设我有一组值

var values = ['Hello', 'world', 'etc']

选中时

selected(event) {
var name;
switch (event.target.value) {
case 'roth':
// append values as options into select, using foreach
// such as:
// <option value="hello">Hello</option>
...
}
}

这是在我的模板中选择的:

<select class="form-control" :id="selection">
<option selected="" disabled="" value="0"></option>
</select>

最佳答案

您可以只为第二个 select 的选项定义一个空数组,并使用您的 switch/case 推送值。稍后您可以将这些值与 v-for 一起使用例如:

new Vue({
el: '#app',
data: {
selectValues: ['Hello', 'world', 'etc'],
secondarySelectValues: [],
},
methods: {
handleChange: function(e) {
switch (e.target.value) {
case 'Hello':
this.secondarySelectValues = [];
this.secondarySelectValues.push('this', 'is', 'hello');
break;
case 'world':
this.secondarySelectValues = [];
this.secondarySelectValues.push('this', 'is', 'world')
break;
case 'etc':
this.secondarySelectValues = [];
this.secondarySelectValues.push('this', 'is', 'etc')
break;
}
}
}
})
<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="app">

<select class="form-control" @change="handleChange">
<option v-for="selectValue in selectValues" :value="selectValue">{{ selectValue }}</option>
</select>

<select class="form-control secondary">
<option v-for="secondarySelectValue in secondarySelectValues" :value="secondarySelectValue">{{ secondarySelectValue }}</option>
</select>

</div>

关于vue.js - 即时动态创建选择选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45494106/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com