vue.js 方法无法从具有多行的数据对象访问变量答案

【问题标题】：vue.js method can't access variable from data object with multiple rowsvue.js 方法无法从具有多行的数据对象访问变量
【发布时间】：2017-10-02 05:00:57
【问题描述】：

我目前正在学习 vue.js，但无法访问方法中的数据。

数据已加载并设置为全局变量（目前，这可能会改变，但我认为这不是问题的一部分）

通过ajax调用接收到这个数据：

数据":[{"itemId":"58646f066803fa62388b4573","color":"#ffb878","name":"test1","startDate":"04/24/2017","work":" 9.25"},{"itemId":"58646f066803fa62388b4572","color":"#ffb878","name":"test2","startDate":"04/24/2017","work":"4.25"} ,{"itemId":"58646f066803fa62388b4571","color":"#a4bdfc","name":"test3","startDate":"05/01/2017","work":"24.00"}]

设置为全局（变量数据设置在函数之外）：

...成功：函数（jsonObj） { 数据['item'] = jsonObj.data

....

现在是 vue 部分：

var app = new Vue({
  el:'#canvas',
  data: {
    items: data['item']
  },
  methods: {
    moveItem: function(){
      console.log("new date: "+this.startDate);
    }
  }
})

html:

<div v-for="row in items" class="entirerow" v-bind:id="'row'+row.itemId">
                                    <div class="itemrow">{{ row.name }}</div>
                                    <div class="itemrow"><input type="text" v-model="row.startDate" @change="moveItem"></div>
                                    <div class="itemrowlast">{{ row.work }}</div>

                            </div>

这很好地显示了 3 行，每行都有正确的数据。到目前为止，一切都很好。但是现在，如果我更改输入值中的某些内容，则会触发 moveItem 方法，但会在 console.log 中声明“新日期：未定义”

我也尝试过 console.log("new date: "+this.items.startDate) 但没有雪茄，然后该方法似乎不知道处理了哪一行。

如何在方法中访问正确的数据，从循环中的某一行开始？

谢谢！

【问题讨论】：

标签： vuejs2

【解决方案1】：

您在方法 (this.startDate) 中引用数据对象而不是项目

moveItem: function(){
  console.log("new date: "+this.startDate);
}

您可以像这样更改您的代码

模板

@change="moveItem(row)"

脚本

moveItem: function(row){
  console.log("new date: " + row.startDate);
}

【讨论】：