Question

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

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

通过ajax调用收到此数据：

数据＆＃34;：[{＆＃34;的itemId＆＃34;：＆＃34; 58646f066803fa62388b4573＆＃34;＆＃34;颜色＆＃34;：＆＃34;＃ffb878＆＃34;＆＃34 ;名称＆＃34;：＆＃34; TEST1＆＃34;＆＃34;的startDate＆＃34;：＆＃34; 04/24/2017年＆＃34;＆＃34;工作＆＃34;：＆＃34; 9.25＆＃34;}，{＆＃34;的itemId＆＃34;：＆＃34; 58646f066803fa62388b4572＆＃34;＆＃34;颜色＆＃34;：＆＃34;＃ffb878＆＃34;＆＃34;名称＆＃34;：＆＃34; TEST2＆＃34;＆＃34;的startDate＆＃34;：＆＃34; 04/24/2017年＆＃34;＆＃34;工作＆＃34;：＆＃34; 4.25＆＃34;}，{＆＃34;的itemId＆＃34;：＆＃34; 58646f066803fa62388b4571＆＃34;＆＃34;颜色＆＃34;：＆＃34;＃a4bdfc＆＃34;＆＃34;名称＆＃34 ;：＆＃34; TEST3＆＃34;＆＃34;的startDate＆＃34;：＆＃34; 05/01/2017＆＃34;＆＃34;工作＆＃34;：＆＃34; 24.00＆＃34 ;}]

通过以下方式设置为全局（可变数据在函数外部设置）：

...成功：功能（jsonObj） { 数据[＆＃39; item＆＃39;] = 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，但会声明＆＃34; new date：undefined＆＃34;在console.log中

我已经尝试过console.log（＆＃34;新日期：＆＃34; + this.items.startDate），但没有雪茄，然后看起来这个方法似乎不知道哪个行被处理。

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

谢谢！

Answer 1

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

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

您可以像这样更改代码

<强>模板

@change="moveItem(row)"

<强>脚本

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

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

1 个答案: