[英]Vue.js - Component template not rendering with v-for
I have method that calls ajax to my api and that response which returns I assigning it to an array.我有将 ajax 调用到我的 api 的方法和返回的响应,我将它分配给一个数组。 After that in template section with
v-for
I display data.之后在模板部分使用
v-for
我显示数据。 It render only one time after I change something in data to display.在我更改要显示的数据中的某些内容后,它仅呈现一次。 After refresh it is not displaying anymore.
刷新后不再显示。
No errors in console, and vue shows that array is filled with returned response.控制台中没有错误,并且 vue 显示数组已填充返回响应。
Template:模板:
<template>
<div class="row">
<div class="col-12">
<h5 class="component-title">Game board</h5>
<button v-for="number in board" v-bind:key="number.results" :class="'col-1 btn btn-'+number.colors">{{number.positionToId}}</button>
</div>
</div>
</template>
Script section:脚本部分:
import RouletteApi from "@/services/api/Roulette";
export default {
name: "GameBoard",
data() {
return {
board: []
};
},
created() {
this.getBoardLayout();
},
methods: {
getBoardLayout() {
RouletteApi.getLayout().then(response => {
//this.rLayout.orgResponse = response;
for (var i = 0; i < response.slots; i++) {
this.board[i] = {
results: response.results[i],
positionToId: response.positionToId[i],
colors: response.colors[i]
};
}
});
}
}
};
What am i doing wrong?我究竟做错了什么?
You have no reactivity by using that method to fill your array so try this using push
function:使用该方法填充数组没有反应性,因此请使用
push
函数尝试此操作:
methods: {
getBoardLayout() {
RouletteApi.getLayout().then(response => {
//this.rLayout.orgResponse = response;
for (var i = 0; i < response.slots; i++) {
this.board.push({
results: response.results[i],
positionToId: response.positionToId[i],
colors: response.colors[i]
});
}
});
}
}
or using this.$set
instance method :或使用
this.$set
实例方法:
methods: {
getBoardLayout() {
RouletteApi.getLayout().then(response => {
//this.rLayout.orgResponse = response;
for (var i = 0; i < response.slots; i++) {
this.$set(this.board,i, {
results: response.results[i],
positionToId: response.positionToId[i],
colors: response.colors[i]
});
}
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.