Vuejs 问题；如何绑定添加到 DOM 的新元素？答案

【问题标题】：Vuejs problem ; How to bind new elements added to DOM?Vuejs 问题；如何绑定添加到 DOM 的新元素？
【发布时间】：2019-05-13 11:07:55
【问题描述】：

我想在创建新的 Vue 实例后向 DOM 添加新元素。我知道我可以重新启动 vue 的实例，但这似乎不是一个好主意，因为 vue 必须再次重新渲染所有元素。那么有没有一种方法可以将新元素绑定到数据范围？

<body>
  <div id="app">
    <span>{{ a }}<span>

    <div id="newElem"></div>
  </div>
</body>

<script>

    $(document).ready(function () {
        var mainApp = new Vue({
            el: "#app",
            data: {
                "a": "aa",
                "b": "bb"    
            }
        });

        $("#newElem").html("<span>{{ b }}</span>")

    });

</script>

此代码呈现未绑定的 {{ b }}。我正在寻找一种方法来防止这种情况发生。

谢谢

【问题讨论】：

此演示应用程序中显示了问题：jsfiddle.net/mirshahreza/y3hb790a/5

标签： vue.js binding

【解决方案1】：

你尝试过这样的事情吗？

<div v-html="newElem"></div>

el: "#app", data: { "a": "aa", "b": "bb" }, created() { this.newElem = "<span>{{ b }}</span>"; }

【讨论】：

我想在运行时添加元素，所以它在开发时不存在

【解决方案2】：

在这里很难说出你的最终目标，但我会试一试。

理想情况下，您不会接触 DOM，而是希望更新数据并让 Vue 为您处理 DOM。

我认为您想将 b 初始化为 undefined 并在您准备好显示时设置它。

data: {
  a: 'aa',
  b: undefined,
}

然后在你的模板中你可以有这样的东西：

<span v-if="b">{{ b }}</span>

这样在b 为真之前，span 不会显示。

然后，稍后，当b 准备好时，您将mainApp.b = 'bb'。

这是一个快速演示：http://jsfiddle.net/crswll/vtu8nzea/1/

如果您添加更完整的用例，我可能会提供进一步的帮助。

此外，这个答案也可能会有所帮助。这有点像这种思维的下一个层次：Vuejs: v-model array in multiple input

【讨论】：

我的问题不在于数据。它是关于动态 DOM 的。我正在开发一个具有运行时设计器的软件，因此我必须处理绑定到当前数据的运行时元素。
感谢您的回答，但我的情况是元素最初不存在并且它会动态添加到文档中的情况。一个 jsfiddle 向您展示了确切的条件：jsfiddle.net/mirshahreza/y3hb790a/5