Vue.js - 组件模板不使用 v-for 渲染

Posted 2023-02-23

【中文标题】Vue.js - 组件模板不使用 v-for 渲染

【英文标题】：Vue.js - Component template not rendering with v-for

【发布时间】：2019-04-14 15:22:25

【问题描述】：

我有调用 ajax 到我的 api 的方法和返回的响应，我将它分配给一个数组。之后在带有v-for 的模板部分中显示数据。在我更改要显示的数据内容后，它只呈现一次。刷新后不再显示。

控制台没有错误，并且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>

脚本部分：

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]
          ;
        
      );
    
  
;

我做错了什么？

【参考方案1】：

使用该方法填充数组没有反应，因此请尝试使用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]
        );
      
    );
  

或者使用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]
          );
        
      );