Javascript 如何使用Vue.js方法设置数据属性

我是Vue.js新手，尝试显示服务器请求的数据。我创建了一个新的Vue应用程序并定义了一个方法：

methods: {
  getData: function() {
    // making a request, parsing the response and pushing it to the array.
    console.log(arr);
    return arr;
    }
  }

该方法工作正常，我可以通过单击按钮将阵列记录到控制台

<button v-on:click="getData">Get me some data</button>

。。。并使用

for

循环将其显示给用户：

<p v-for="value in values">{{ value }}></p>

{{value}>

---

至少这个解决方案没有产生预期的结果。我可能误解了Vue的一些逻辑。

您需要使用数据属性

data() {
   return {
       values: []
   }
},

methods: {
   getData: function() {
       this.values = arr;
   }
}

---

然后循环数值

谢谢，这很有效，我可以从控制台看到，

数值

数组也相应地更新了。但是，Vue似乎无法检测到对数组的这些更改，并且前端不会显示获取的值（仅显示初始的空数组）。有什么想法吗？你确定你已经将获取的数据分配给了值吗？是的，我改变了逻辑如下data（）{return{values:[]}，methods:{getData:function（）{this.values=arr；console.log（this.values）；//我可以在控制台上看到提取的数据。}}}``我认为问题在于更新

values

数组时，我的应用程序不会重新呈现HTML文档

{{value}}>

这只是显示初始数组，而不是更新的数组。调试花了一段时间，但问题在范围内<代码>this.values=arr；console.log（this.values）这在函数范围内工作正常，但是

这

并不是指我想到的数组。需要添加

const self=this在全局级别。很难注意到这一点，但现在一切正常
data() {
   return {
       values: []
   }
},

methods: {
   getData: function() {
       this.values = arr;
   }
}