Javascript VueJS-v-if和v-show don'；我不能正常工作

我在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>

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

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

它来自于我用来绘制图表的库——metricsgraphics.js。 所以我把结果记录了下来

document.getElementById('chart')

它是空的。所以这意味着，尽管我将图表转换为true，但它做得不够快。我怎样才能解决这个问题

---

我还尝试使用v-show而不是v-if-效果不好-我有一些关于某些元素的宽度为NaN的错误。

您应该在组件的

mounted（）

回调中运行这段代码

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

无论如何，在使用外部库时使用

v-if

不是一个好主意，最好在

mounted（）

回调中初始化视图，然后查看

图表显示的
变量，如下所示：

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

您应该在组件的
mounted（）
回调中运行这段代码

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

无论如何，在使用外部库时使用
v-if
不是一个好主意，最好在
mounted（）
回调中初始化视图，然后查看
图表显示的
变量，如下所示：

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

您确定您的脚本在DOM之后吗？尝试将“延迟”添加到脚本标记，或者将其移动到身体底部。显示组件的代码会很有帮助。@Cobaltway我在单独的文件中有一个脚本-我显示的部分是一个函数，当某些事件发生时会触发-当用户从下拉列表中选择某个内容时会触发。@Potray-什么组件代码？您确定您的脚本位于DOM之后吗？尝试将“延迟”添加到脚本标记，或者将其移动到身体底部。显示组件的代码会很有帮助。@Cobaltway我在单独的文件中有一个脚本-我显示的部分是一个函数，当某些事件发生时触发-当用户从下拉列表中选择某个内容时触发。@Potray-什么组件代码？但我的代码在运行时被多次触发。在加载阶段，它根本不启动。当用户从下拉列表中选择某个内容时，它被称为-DOM已在该时刻加载。我们将需要您触发此代码的回调。当下拉列表选择更改时，它被调用-I did@change=“my function”并在VueBut的“方法”部分添加了此函数，但我的代码在运行时被多次激发。在加载阶段，它根本不启动。当用户从下拉列表中选择某个内容时，它被称为-DOM此时已加载。我们将需要您触发此代码的回调。当下拉列表选择更改时，它被调用-我做了@change=“my function”，并在Vue的“方法”部分添加了此函数