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 OR 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＆gt;调用它时1（图表应该出现）。我收到错误：

指定的目标元素＆＃34; #chart＆＃34;在页面中找不到。图表不会被渲染。

我来自图书馆，用于绘制图表 - metricsgraphics.js。所以我控制台记录了

的结果

document.getElementById('chart')

它是 null 。所以这意味着虽然我将chartShown切换为true，但它的执行速度还不够快。我该如何解决这个问题？

我也尝试过使用v-show而不是v-if - 并不能正常工作 - 我对某些元素的宽度是NaN有一些错误。

Answer 1

您应该在组件的#progress-text { color: red; font-size: 30px; }回调中运行这段代码。

对我来说，看起来你在脚本完成加载时正在运行它，这不一定是完全构建DOM的时候，当Vue完成渲染组件时肯定不会。

使用外部库时使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="progress-text"> </div> <button id="show"> Show </button>无论如何都不是一个好主意，你最好在mounted()回调中初始化你的观点，然后再看你的v-if变量这样：

mounted()

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

1 个答案: