0

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);
    }
  }
};

谢谢。

FiddleLink

4

1 回答 1

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/

于 2018-08-02T22:13:08.840 回答