[英]VueJS - Axios array not updated
我正在尝试从 API 更新我在数据中声明的数组。 当我用一个对象初始化数组时,这个对象很好地出现在 HTML 代码中。 在 axios 调用的范围之后,该数组似乎没有“保存”。 任何人都可以帮助我吗? 我没有任何错误代码/消息。
var vm = new Vue({
el: '#recettes',
data: {
results: []
},
created() {
axios.get('url')
.then((response) => {
this.results = response.data
console.log("Size before end of scope = " + this.results.length) // = 4
});
console.log("Size after = " + this.results.length) // = 0
}
});
响应 API 是:
[
{
"id": 1,
"titre": "Cassoulet",
"contenu": "Couper. Faire cuire...",
"id_util": 1
},
{
"id": 2,
"titre": "Gateau",
"contenu": "chocolat",
"id_util": 4
},
{
"id": 3,
"titre": "Gateau",
"contenu": "fraise",
"id_util": 5
},
{
"id": 4,
"titre": "Gateau",
"contenu": "Mélanger, cuire, four 220°...",
"id_util": 5
}
]
模板:
<div id="recettes">
<div v-for="result in results">
<div class="card">
<div class="card-divider">
{{ result.titre }}
</div>
<div class="card-section">
{{ result.contenu }}
</div>
</div>
</div>
</div>
更新
var vm = new Vue({
el: '#recettes',
data: {
results: []
},
created() {
axios.get('URL')
.then(response => {
this.results = response.data
console.log("size: " + this.results.length)
console.log('results[0]: ' + this.results[0].titre)
})
}
});
使用此代码, results[0].titre 包含正确的字符串。 但在 HTML 代码中,没有显示卡片。 并使用此代码:
var vm = new Vue({
el: '#recettes',
data: {
results: [
{"id" = 1, "id":1,"titre":"Cassoulet","contenu":"Couper. Faire cuire...","id_util":1}
]
},
created() {
axios.get('URL')
.then(response => {
this.results = response.data
console.log("size: " + this.results.length)
console.log('results[0]: ' + this.results[0].titre)
})
}
});
一张卡片显示在 HTML 中,titre = "Cassoulet" 和 contenu = "Couper. Faire cuire..."
这就是为什么我说数组似乎没有更新的原因......
嗨,我认为这是一个异步问题。 如您所见,javascript 不会等待另一个函数完成。 试试这个。
created() {
axios.get('url')
.then((response) => {
this.results = response.data
console.log("Size before end of scope = " + this.results.length) // = 4
return true;
}).then((response) => {
console.log("Size after = " + this.results.length) // = 4
});
// console.log("Size after = " + this.results.length) // = 0
}
UPDATE1:添加小提琴
这是一个示例小提琴供您查看。 https://jsfiddle.net/khenxi/n49zj258/
Vue 是反应式的。
该请求是异步的,因此您检查大小的代码在then()
部分之前运行。 如果您将{{ results.length }}
放入模板中,它将很快变为0
和4
,您甚至可能永远不会在 0 处看到它。
仅仅因为登录时长度为0
并不意味着它没有“保存”。
如果您想要变量中的长度,您可以使用计算属性并执行以下操作:
computed: {
resultsLength () {
return this.results.length
},
}
我不知道你是否有答案,但这是我的解决方案。 您必须使用已安装的生命周期来更新您的阵列:
data() {
return {
headings: []
};
},
mounted() {
axios
.get("url")
.then(result => {
console.log(result);
this.headings = result.data;
});
}
在异步调用之后,标题数组将具有新值。
使用 Vue时要记住三件事:
- 使用Vue.set()为响应式数据成员(数组/对象)分配值
- 对反应性数据成员使用计算属性。
- 在挂载函数中使用Vue.$nexttick()以确保 DOM 已准备就绪。
- 在您的情况下,您应该使用
Mounted hook
而不是 Created 挂钩。
import Vue from'vue'
...
mounted() {
Vue.$nexttick(function(){
axios
.get('url')
.then((response) => {
Vue.set(this,'results',response.data)
console.log("Size before end of scope = " + this.results.length) // = 4
});
console.log("Size after = " + this.results.length) // = 0
}
},
computed: {
//Optional
freshResults: function() {
return this.results
}
}
希望这可以帮助。 您可以参考官方文档了解更多信息: https ://v2.vuejs.org/v2/api/#Vue-set
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.