Vuejs2：创建可重用方法以获取多个 HTML select 列表中的选项文本的问题

Question

Vuejs2（或任何版本）菜鸟在这里。我有几个输入和 selects 下拉列表 (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);
    }
  }
};

谢谢。

FiddleLink

Answer 1

您的问题是在方法参数上调用 this。

从您的代码中查看此示例：

...

getText(myArr=[], vModel="") {          
var values = this.myArr.map(function(o) {
...

使用 this.myArr 会让 vue 认为您正在尝试访问数据对象中的 myArr。由于您的对象中没有它，因此会出现 annot read property 'map' of undefined

之类的错误

因此，不要对方法参数调用 this。只需使用 myArr.map

这是您的更新模式：http://jsfiddle.net/wpsoud1q/15/

Vuejs2：创建可重用方法以获取多个 HTML select 列表中的选项文本的问题

Vuejs2: Issue creating a reusable method to get options text in multiple HTML select lists

drop-down-menu

vue-component

vuejs2

select-options