如何在运行时更新 vue 模板？

Question

我正在开发基于 CMS 的 vue 页面。在页面中，我有一个根容器，里面有两个子容器，如下所示

<div id="app">
    <div class="above-the-fold">...</div>
    <div class="below-the-fold noscript-container">
        <noscript>
            <div v-if="true">{{someDynamicBinding}}</div>
            <div v-if="false">{{someDynamicBinding}}</div>
        </noscript>
    </div>
</div>

如果启用了 javascript，我将删除 noscript 标记并使用以下脚本将内部内容附加到父元素。

document.addEventListener("DOMContentLoaded", function () {
  const appendContents = function () {
    const noScript = document.querySelector(".noscriptcontainer noscript");
    const belowContent = noScript.innerHTML;
    noScript.parentElement.innerHTML += belowContent;
    console.log("elm appended");
    window.removeEventListener("scroll", appendContents);
    noScript.remove();
    console.log("eve removed");
  };
  window.addEventListener("scroll", appendContents);
});

现在的问题是 vue 没有评估 v-if 或 {{dynamicBinding}}
jsfiddle链接https://jsfiddle.net/69yr3mp5/2/

现在完成这项工作的最佳方法是什么？

Answer 1

尝试用 v-else-if 替换第二个 if

                <div v-if="true"><h1>
                        {{someDynamicBinding}}
                    </h1></div>
                    <div v-else-if="false"><h1>
                        {{someDynamicBinding}}
                    </h1></div>
                </noscript>

Answer 2

TL;DR;

您可以更新模板运行时，但您无法在组件挂载后更新模板。

---

在这些框架的上下文中，运行时意味着它不是预编译的，这是 Vue 支持的。但是，这里的问题（其中之一）是您在安装应用程序后修改模板。 Vue 应用程序在初始读取后不会继续检查模板。虽然我不确定您要在这里完成什么，但方法似乎是错误的。

为了说明，如果你使用这段代码，它会编译更新的代码，但直到你滚动。

let mounted = false

document.addEventListener("DOMContentLoaded", function() {

  const appendContents = function() {
    const noScript = document.querySelector(".noscript-container noscript");
    const belowContent = noScript.innerHTML;
    noScript.parentElement.innerHTML += belowContent;
    console.log("elm appended");
    window.removeEventListener("scroll", appendContents);
    noScript.remove();
    console.log("eve removed");

    if (!mounted) {
      Vue.createApp({
        data() {
          return {
            someDynamicBinding: 'Some Content'
          };
        },
        mounted() {
          console.log('mounted')
        },
      }).mount('#app');
    };
    mounted = true
  }

  window.addEventListener("scroll", appendContents);
});