VueJS - v-if 和 v-show 不能正常工作

Question

我在 Vue DIV 中有这个结构：

            <div class="row">
                <div class="well chart-container">
                    <div id="chart" v-if="chartShown"></div>
                    <h1 v-if="textShown">{{staticPropertyValue}}</h1>
                </div>            
            </div>

在我的应用程序中，我希望能够显示图表 div 或 h1 标记。这是我的 javaScript 的一部分：

app.textShown = false;
app.chartShown = true;

if (data.length == 0) {
    MG.data_graphic({
        title: "Missing Data",
        description: "",
        error: 'No data',
        chart_type: 'missing-data',
        missing_text: 'There is no data',
        target: '#chart',
        full_width: true,
        height: 600
    });

    return;
};

if (data.length == 1) {
    app.staticPropertyValue = data[0].value;
    app.chartShown = false;
    app.textShown = true;
    return;
}

console.log('DRAWING GRAPH');
console.log(document.getElementById('chart'));
 MG.data_graphic({
    title: "Fetched data",
    description: "",
    data: data,
    full_width: true,
    height: 600,
    target: '#chart',
    x_accessor: 'time',
    y_accessor: 'value'
});

因此，根据 data.length 属性，显示图表或显示 h1 标记。问题出现了，当我第一次调用上面的代码并显示 h1 标签时（因为 data.length == 1），然后下次我用 date.length > 1 调用它（应该出现图表）。我得到错误：

在页面中找不到指定的目标元素“#chart”。 图表不会被渲染。

它来自我用于绘制图表的库 - metricsgraphics.js。 所以我控制台记录了

的结果

document.getElementById('chart')

它是 null。所以这意味着虽然我将 chartShown 切换为 true，但它完成得不够快。我该如何解决这个问题？

我也尝试使用 v-show 代替 v-if - 效果不佳 - 我对某些元素的宽度为 NaN 有一些错误。

Answer 1

您应该在组件的mounted() 回调中运行这段代码。

对我来说，看起来你是在脚本完成加载时运行它，这不一定是在 DOM 完全构建时，也绝对不是在 Vue 完成渲染其组件时。

在使用外部库的同时使用v-if 无论如何都不是一个好主意，您最好在mounted() 回调中初始化您的视图，然后像这样观察您的chartShown 变量：

{
  ...,
  watch: {
    chartShown(nv) {
      if (nv) {
        // setup chart
      } else {
        // remove chart
      }
    }
  },
  ...
}