Vuejs2（或任何版本）新手在这里。我有几个输入并选择包含不同数据的下拉列表 (ddl)，我希望从中获取文本值以与我的表单一起传递。我不想为每个 select ddl 编写一个方法来获取每个选项的文本。我已经尝试了下面的代码，但是如果我尝试对两个 ddl 使用一种方法，则会出现错误：
"Cannot read property 'map' of undefined
at VueComponent.getText"
请告诉我我做错了什么。
HTML：
<div class="food">
<input type="text"
name="txt_myFood"
v-model="txt_myFood">
<select id="sel_food"
v-model="sel_food"
v-on:change="getText(myFood, sel_food)">
<option v-for="food in myFood"
v-bind:value="food.value">{{ food.text }}
</option>
</select>
</div>
<div class="colors">
<input type="text"
name="txt_myColor"
v-model="txt_myColor"">
<select id="sel_colors"
v-model="sel_colors"
v-on:change="getText(myColors, sel_colors)">
<option v-for="color in myColors"
v-bind:value="color.value">{{ color.text }}
</option>
</select>
</div>
Vue
export default {
data() {
return {
optionText: "",
sel_food: "",
myFood: [
{ value: 0, text: "tuna" },
{ value: 1, text: "chicken" },
{ value: 2, text: "lamb" }
],
sel_colors: "",
myColors: [
{ value: 0, text: "red" },
{ value: 1, text: "blue" },
{ value: 2, text: "yellow" }
]
};
},
methods: {
getText(myArr=[], vModel="") {
var values = this.myArr.map(function(o) {
return o.value;
});
var index = values.indexOf(this.vModel);
this.optionText = this.myArr[index].text;
console.log(this.optionText);
}
}
};
谢谢。