[英]Vue JS Data not updating
I have the following code in Vue JS V2:我在 Vue JS V2 中有以下代码:
data() {
return {
properties: [],
loading: true,
showProgressBars: true,
debugText: 'This is start'
}
},
methods: {
get() {
const success = (r) => {
this.properties = r.data.properties
this.loading = false
this.debugText = 'api has returned success'
}
const error = (r) => {
console.error(r)
}
var resourceUri = `/api/v1/properties`
this.$http
.get(resourceUri)
.then(success, error)
}
I don't know why the properties array is not being updated.我不知道为什么属性数组没有被更新。 I can see that the API is returning the properties correctly and if I debug the script in chrome, the correct data is indeed assigned to this.properties
in the callback.我可以看到 API 正在正确返回属性,如果我在 chrome 中调试脚本,正确的数据确实分配给回调中的this.properties
。
I added the debugText
in there and it is also not updated.我在那里添加了debugText
,它也没有更新。
<p>{{debugText}}</p>
This code has not had any changes for the pass two years and it failed today - I'm not sure whats going on here?这段代码在过去的两年里没有任何变化,今天它失败了——我不确定这里发生了什么?
I don't know which version of vue-resource
you are using.我不知道您使用的是哪个版本的vue-resource
。 Maybe your version is old.可能你的版本太旧了。 According to this github page when you use this.$http.get()
in version "vue-resource": "^1.5.3"
, you must use response.body
to get data.根据这个 github 页面当你使用this.$http.get()
in version "vue-resource": "^1.5.3"
,你必须使用response.body
来获取数据。 I am not sure that this is the reason that your code is not working, But this code works fine for me:我不确定这是否是您的代码无法正常工作的原因,但是此代码对我来说可以正常工作:
<template> <h1>API page</h1> </template> <script> export default { name: "Apicall", data() { return { properties: [], loading: true, showProgressBars: true, debugText: 'This is start' } }, methods: { get() { const success = (r) => { console.log(r.body); this.properties = r.body this.loading = false this.debugText = 'api has returned success' } const error = (r) => { console.error(r) } var resourceUri = `https://jsonplaceholder.typicode.com/users` this.$http.get(resourceUri).then(success, error) }, }, mounted: function() { this.get(); } } </script> <style scoped> </style>
Maybe for your data, you should call r.body.data.properties
, But I am not sure.也许对于您的数据,您应该调用r.body.data.properties
,但我不确定。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.