Javascript Vue.js-组件模板未使用v-for进行渲染
我有一个方法,该方法调用ajax到我的api,并返回我将其分配给数组的响应。之后,在模板部分中使用Javascript Vue.js-组件模板未使用v-for进行渲染,javascript,html,vue.js,vuejs2,vue-component,Javascript,Html,Vue.js,Vuejs2,Vue Component,我有一个方法,该方法调用ajax到我的api,并返回我将其分配给数组的响应。之后,在模板部分中使用v-forI显示数据。在我更改数据中要显示的内容后,它只渲染一次。刷新后,它不再显示 控制台中没有错误,vue显示数组中填充了返回的响应 模板: <template> <div class="row"> <div class="col-12"> <h5 class="component-title">Game board<
v-for
I显示数据。在我更改数据中要显示的内容后,它只渲染一次。刷新后,它不再显示
控制台中没有错误,vue显示数组中填充了返回的响应
模板:
<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>
游戏板
{{number.positionToId}
脚本部分:
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]
};
}
});
}
}
};
从“@/services/api/Roulette”导入RouletteApi;
导出默认值{
名称:“游戏板”,
数据(){
返回{
董事会:[]
};
},
创建(){
这个.getBoardLayout();
},
方法:{
getBoardLayout(){
RouletteApi.getLayout().then(响应=>{
//this.rLayout.orgResponse=响应;
对于(变量i=0;i
我做错了什么?使用该方法填充阵列时,您没有反应能力,因此请尝试使用
推送功能:
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]
});
}
});
}
}
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]
});
}
});
}
}