Vuejs 变量不显示在模态上

Question

我有一个脚本需要在模态 window 上输出答案的结果。但目前它没有渲染。结果在模态之外正确输出HTML；即使在可见时检查模态源也会显示数据未呈现；也就是说，结果并没有从视图中隐藏，它们根本就没有被计算出来。

完整的来源在 http://www.sic-parvis-magna.com/sicpm/mayan-vue/index.html

有问题的变量是 userAnswer、userAnswerDisplay 和 userMessage

<div class="modal">
    <div class="modal-background"></div>
    <div class="modal-card">
        <section class="modal-card-body">
            <div v-if="userAnswer !== -1">
                <div id="user-answer" v-html="userAnswerDisplay"></div>
                <div id="user-answer-message" v-html="userMessage"></div>
                <div id="user-hint"></div>
            </div>
        </section>
        <footer class="modal-card-foot">
            <button class="button is-success">Save changes</button>
            <button class="button modal-close">Cancel</button>
        </footer>
        <button class="modal-close is-large" aria-label="close"></button>
    </div>
</div>

Answer 1

问题是您的模态模板在 Vue 应用程序之外（即 section#mainapp），因此 Vue 无法处理该模板：

<section id="mainapp">...</section>

<div class="modal">...</div> <!-- FIXME: Move this into section above -->

将模态移动到 section#mainapp 以计算要计算的属性。

demo

Vuejs 变量不显示在模态上

Vuejs Variables Not Displaying on Modal

vue.js

vuejs2

bulma