Vue.js - 组件模板不使用 v-for 渲染 [英] Vue.js - Component template not rendering with v-for
问题描述
我有将 ajax 调用到我的 api 的方法和返回的响应，我将它分配给一个数组.之后在模板部分使用 v-for 我显示数据.在我更改要显示的数据中的某些内容后，它仅呈现一次.刷新后不再显示.
控制台没有错误，vue 显示数组已填充返回响应.
模板:
<div class="row"><div class="col-12"><h5 class="component-title">游戏板</h5><button v-for="number in board" v-bind:key="number.results" :class="'col-1 btn btn-'+number.colors">{{number.positionToId}}</按钮></模板>
脚本部分:
从@/services/api/Roulette"导入RouletteApi；导出默认{name: "游戏板",数据() {返回 {木板: []};},创建(){this.getBoardLayout();},方法: {getBoardLayout() {RouletteApi.getLayout().then(response => {//this.rLayout.orgResponse = response;for (var i = 0; i < response.slots; i++) {this.board[i] = {结果: response.results[i],positionToId: response.positionToId[i],颜色: response.colors[i]};}});}}};我做错了什么?
使用该方法填充数组没有反应性，因此请尝试使用 push 函数:
方法:{getBoardLayout() {RouletteApi.getLayout().then(response => {//this.rLayout.orgResponse = response;for (var i = 0; i < response.slots; i++) {this.board.push({结果: response.results[i],positionToId: response.positionToId[i],颜色: response.colors[i]});}});}}或使用 this.$set 实例方法:
方法:{getBoardLayout() {RouletteApi.getLayout().then(response => {//this.rLayout.orgResponse = response;for (var i = 0; i < response.slots; i++) {this.$set(this.board,i, {结果: response.results[i],positionToId: response.positionToId[i],颜色: response.colors[i]});}});}}I have method that calls ajax to my api and that response which returns I assigning it to an array. After that in template section with v-for I display data. 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.
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:
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 :
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]
});
}
});
}
}
这篇关于Vue.js - 组件模板不使用 v-for 渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
