如何在vuejs选择的另一个选择选项的基础上更改选择选项

Question

我想使用它，但在Vue版本中遇到了问题。我在Vuejs.org上读过Vue的纪录片，但它对我将这个脚本迁移到Vue版本没有帮助

结构HTML

<select id="type">
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
</select>
<select id="size">
<option value="">-- select one -- </option>
</select>

JS-

$(document).ready(function() {
$("#type").change(function() {
var val = $(this).val();
if (val == "item1") {
$("#size").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
} else if (val == "item2") {
$("#size").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");
} else if (val == "item3") {
$("#size").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");
}
});

});

Answer 1

下面是一个如何操作的示例：https://codepen.io/antoniandre/pen/OJJQMGN?editors=1010

JS

new Vue({
el: '#app',
data: () => ({
selection1: null,
optionsList: ''
}),
methods: {
changeSelect2 () {
switch (this.selection1) {
case 'item1':
this.optionsList = '<option value="test">item1: test 1</option><option value="test2">item1: test 2</option>'
break;
case 'item2':
this.optionsList = '<option value="test">item2: test 1</option><option value="test2">item2: test 2</option>'
break;
case 'item3':
this.optionsList = '<option value="test">item3: test 1</option><option value="test2">item3: test 2</option>'
break;
}
}
}
})

HTML

<div id="app">
<select @change="changeSelect2" v-model="selection1">
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
</select>
<select v-html="optionsList"></select>
</div>

但这肯定不是最干净的方法，我只是把你的例子改成了原样。为了让它更好，选项可能应该在列表中。

---

这里有一些教程可以开始并理解：

1. 包含Vue库
2. 永远不要操作DOM(除非别无选择(，Vue是数据驱动的
3. 使用@eventName侦听DOM元素上的DOM事件
4. 将函数放在methods中，将vars放在data中，这总是这样
5. v-model属性是双向绑定，当选择列表所选选项发生更改时，它会触发变量自动更改，这称为"反应性">
6. 如果您只想保留其文本值而不想保留html，则将变量放在html的v-html或胡子{{ }}中的html中
7. 遵循一些教程

Answer 2

我需要这个问题的答案，我找到了这个主题。所以，我试过了，是的，它奏效了。在那之后，我想尝试改进3个相互链接的独立选择框的答案。这是我的答案：

<script src="vue.js"></script>
<form method="get">
<div id="app">
<select @change="select1change" v-model="list1" name="select1">
<option value="fruits">fruits</option>
<option value="vegetables">vegetables</option>
<option value="flowers">flowers</option>
</select>
<select @change="select2change" v-model="list2" v-html="select2options" name="select2"></select>
<select v-html="select3options" name="list3"></select>
</div>
<input type="submit">
<form>
<script>
new Vue({
el: '#app',
data: () => ({
list1: null,
list2: null,
select2options: '',
select3options: ''
}),
methods: {
select1change() {
switch (this.list1) {
case 'fruits':
this.select2options = '<option value="apple">apple</option><option value="banana">banana</option>'
break;
case 'vegetables':
this.select2options = '<option value="spinach">spinach</option><option value="broccoli">broccoli</option>'
break;
case 'flowers':
this.select2options = '<option value="rose">rose</option><option value="daisy">daisy</option>'
break;
}
},
select2change() {
switch (this.list2) {
case 'apple':
this.select3options = '<option value="red apple">red apple</option><option value="green apple">green apple</option>'
break;
case 'banana':
this.select3options = '<option value="yellow">yellow</option><option value="green">green</option>'
break;
case 'spinach':
this.select3options = '<option value="big leaf">big leaf</option><option value="tiny leaf">tiny leaf</option>'
break;
case 'broccoli':
this.select3options = '<option value="whole broccoli">whole broccoli</option><option value="half broccoli">half broccoli</option>'
break;
case 'rose':
this.select3options = '<option value="pink rose">pink rose</option><option value="red rose">red rose</option>'
break;
case 'daisy':
this.select3options = '<option value="white daisy">white daisy</option><option value="yellow daisy">yellow daisy</option>'
break;
}
}
}
})
</script>