Question

我有一个循环，如果查看源代码，我可以看到该值已正确传递。但是，模板使用：

"vue-canvas-gauges": "0.0.0",
"canvas-gauges": "^2.1.5",

如果我打开控制台并进行任何编辑，它将重新渲染并显示该值。

这是模板的相关部分：

<div class="col-xs-3 col-xs-offset-1" v-for="item in buildings">
    <div class="panel panel-default">
        <div class="panel-heading">{{item.name}}</div>
        <div class="panel-body">
            <canvas data-width="100" :data-value="item.completion_status" data-type="linear-gauge"></canvas>
        </div>
    </div>
</div>

我有以下方法，在挂载时调用：

methods: {
  async fetchData() {
    axios.get('/api/v1/buildings').then(response => {
      this.buildings=response.data.data;
    });
  }
}

因此，在挂载后，我将其称为this.fetchData，并且页面上生成的HTML是正确的

<div class="col-xs-3 col-xs-offset-1">
    <div class="panel panel-default">
        <div class="panel-heading">Bldg1</div> 
        <div class="panel-body">
            <canvas data-width="100" width="100" data-value="0" data-type="linear-gauge"></canvas>
        </div>
    </div>
</div>

我尝试从以下答案中使用推送提示： Vue.js - Component template not rendering with v-for

VueJS线性语言无法渲染

0 个答案: