Twitter bootstrap 3 在调整窗口大小之前，Chart.js不会使用vue.js进行渲染

我有一个简单的应用程序，它使用Bootstrap、vue.js和chart.js。HTML模板非常简单。在搜索我的错误时，我注意到，当试图在选项卡或模式中呈现图表时，经常会出现此问题，但我的图表没有在模式或模式选项卡中

只要我调整浏览器窗口的大小，图表就会正确呈现并缩放以适应div和所有内容

无论出于何种原因，当页面首次加载时，canvas HTML标记呈现如下：

<canvas id="graph" width="0" height="0" style="margin: auto; width: 0px; display: block; height: 0px;"></canvas>

但当我调整窗口大小时，一切都会发生变化，我可以正确地看到图表

<canvas id="graph" width="493" height="328" style="margin: auto; width: 493px; display: block; height: 328px;"></canvas>

为什么它在页面加载时没有获得正确的高度和宽度

HTML模板

<div class="panel panel-default">
      <div class="panel-heading">Chart List</div>
      <div class="panel-body">
        <div class="row">
            <div class="col-sm-6">
                <defaultchart>
                </defaultchart>
            </div>
            <div class="col-sm-6">
                <chartlistview
                    :data="{{ $private }}"
                    :columns="{{ json_encode($columns) }}"
                >
                </chartlistview>
            </div>
        </div>
            </div>
    </div>

<template>
  <div>
    <canvas 
      id="graph" 
      v-el:canvas 
      width="600" 
      height="400" 
      style="margin:auto; width: 600px;"
    ></canvas>
  </div>
</template>

<script>
  export default {

    data() {
      return {
        ourChart: '',
        chartData: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3]
          }]
        }
      };
    },

    ready() {

      this.drawChart();     
    },

    methods: {

      drawChart: function() {

        if (this.ourChart) {
          this.ourChart.destroy();
        }
        var context = document.querySelector('#graph').getContext('2d');
        this.ourChart = new Chart(context, {
          type: 'line',
          data: this.chartData
          // wouldn't render at all with this regardless of resizing
          /*options: {
            response: true,
            maintainAspectRatio: false
          }*/
        });

        // added these lines to see if it would fix the issue; it didn't
        this.ourChart.render();
        this.ourChart.update();
      }

    }
  };
</script>

图表列表

DefaultChart.vue

<div class="panel panel-default">
      <div class="panel-heading">Chart List</div>
      <div class="panel-body">
        <div class="row">
            <div class="col-sm-6">
                <defaultchart>
                </defaultchart>
            </div>
            <div class="col-sm-6">
                <chartlistview
                    :data="{{ $private }}"
                    :columns="{{ json_encode($columns) }}"
                >
                </chartlistview>
            </div>
        </div>
            </div>
    </div>

<template>
  <div>
    <canvas 
      id="graph" 
      v-el:canvas 
      width="600" 
      height="400" 
      style="margin:auto; width: 600px;"
    ></canvas>
  </div>
</template>

<script>
  export default {

    data() {
      return {
        ourChart: '',
        chartData: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3]
          }]
        }
      };
    },

    ready() {

      this.drawChart();     
    },

    methods: {

      drawChart: function() {

        if (this.ourChart) {
          this.ourChart.destroy();
        }
        var context = document.querySelector('#graph').getContext('2d');
        this.ourChart = new Chart(context, {
          type: 'line',
          data: this.chartData
          // wouldn't render at all with this regardless of resizing
          /*options: {
            response: true,
            maintainAspectRatio: false
          }*/
        });

        // added these lines to see if it would fix the issue; it didn't
        this.ourChart.render();
        this.ourChart.update();
      }

    }
  };
</script>

导出默认值{
数据（）{
返回{
我们的图表：''，
图表数据：{
标签：[“红色”、“蓝色”、“黄色”、“绿色”、“紫色”、“橙色”]，
数据集：[{
标签：“#投票数”，
数据：[12,19,3,5,2,3]
}]
}
};
},
就绪（）{
这是一张图纸（）；
},
方法：{
绘图图：函数（）{
如果（这是我们的图表）{
这个.ourChart.destroy（）；
}
var context=document.querySelector（'#graph'）.getContext（'2d'）；
this.ourChart=新图表（上下文{
键入：“行”，
data:this.chartData
//无论大小如何，都不会使用此选项进行渲染
/*选项：{
回答:对,，
MaintaintAspectRatio:false
}*/
});
//添加这些行以查看它是否可以解决问题；它没有
这个.ourChart.render（）；
this.ourChart.update（）；
}
}
};

在

ready（）

中访问DOM很棘手，因为Vue异步更新DOM，所以更改可能尚未完全应用，和/或浏览器尚未完成新布局

使用

$nextTick（）

延迟到更新完成：

ready() {
  this.$nextTick(function() {
    this.drawChart();     
  })
},

---

在这些情况下，这通常会奏效，至少在Vue方面是这样。无法对chart.js配置进行详细说明。

在

ready（）

中访问DOM很棘手，因为Vue异步更新DOM，因此更改可能尚未完全应用，和/或浏览器尚未进行新布局

使用

$nextTick（）

延迟到更新完成：

ready() {
  this.$nextTick(function() {
    this.drawChart();     
  })
},

---

在这些情况下，这通常会奏效，至少在Vue方面是这样。关于chart.js配置没什么可说的。

哇，这很有效。谢谢问题是。这是Vue中的错误吗？我认为

ready（）

方法的工作原理与jQuery中的相同。还是我用错了，应该一直使用

$nextTick

？不，这不是Vue中的错误。正如我所说的，Vue是出于性能原因，这意味着当Vue说“将此元素放入DOM中”，然后触发ready（）钩子时，“此元素”可能还不在DOM中。因为这是人们似乎遇到的最常见的陷阱之一，所以我建议将其添加到文档中更突出的位置。好的，这是有道理的。我的工作假设是，当DOM实际就绪时，Vue正在侦听来自浏览器的事件回调。谢谢问题是。这是Vue中的错误吗？我认为

ready（）

方法的工作原理与jQuery中的相同。还是我用错了，应该一直使用

$nextTick

？不，这不是Vue中的错误。正如我所说的，Vue是出于性能原因，这意味着当Vue说“将此元素放入DOM中”，然后触发ready（）钩子时，“此元素”可能还不在DOM中。因为这是人们似乎遇到的最常见的陷阱之一，所以我建议将其添加到文档中更突出的位置。好的，这是有道理的。我的操作假设是，当DOM实际就绪时，Vue正在侦听来自浏览器的事件回调。