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调用它(应该出现图表)。我得到了错误：

无法在页面中找到指定的目标元素“#图表”。图表将不会呈现。

它是从库，我是用来绘制图表- metricsgraphics.js。所以我在控制台上记录了

document.getElementById('chart')

而且它是无效的。因此，这意味着尽管我将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
      }
    }
  },
  ...
}