VueJS 反应性在刀片部分内不起作用答案

【问题标题】：VueJS reactivity does not work inside blade sectionVueJS 反应性在刀片部分内不起作用
【发布时间】：2019-02-13 18:34:04
【问题描述】：

我一直在试验 vuejs，试图让它在我的一个 laravel 项目中工作。

问题在于，如果我的元素在布局刀片模板中，但不在该部分中，则反应性工作正常。我试图从控制台修改属性以查看它们在 DOM 中的变化。

我有一个名为 blog.blade.php 的视图，它扩展了布局 app.blade.php

app.blade.php 中的代码

    <div id='test'>
        @{{ test }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    var app2 = new Vue({
        el : "#test",
        data : {
            test : "Hello World"
        }
    });

    var app3 = new Vue({
        el : "#root",
        data : {
            tester : "Hello Vue!"
        }
    });

    </script>
</body>
</html>

这是我 blog.blade.php 视图中的代码

   <div class='card'>
        <div class='card-header'>Post a comment</div>
        <div class='card-body'>
           <div id='root'> @{{ tester }} </div>
        </div>
    </div>

在元素根中，tester属性的值出现了，但是不能修改，但是在app.blade.php布局文件末尾的test元素中是有效的。

我真的迷路了，不知道这里发生了什么。如果有人能对此有所了解，那就太好了。

https://pastebin.com/GkNqFUzy

【问题讨论】：

为什么要使用两个 vue 实例？
@boussadjrabrahim 我只是在尝试，哈哈。它也不适用于单个实例
想要得到什么？
@boussadjrabrahimi 我正在尝试他们网站上视频中最基本的 vue 示例。初始化一个组件，在 DOM 中渲染一个属性，然后从控制台修改它并让它显示在 DOM 中。但是，这不起作用。
如何使用控制台修改？

标签： javascript php laravel vue.js vue-reactivity

【解决方案1】：

vuejs提供v-model属性来改变值

阅读此official 文档了解更多信息

<div class='card'>
    <div class='card-header'>Post a comment</div>
    <div class='card-body'>
       <div id='root' v-model='tester'> @{{ tester }} </div>
    </div>
</div>

如果您在 vue 开发控制台或浏览器控制台中更改 tester 值，那么您可以很容易地看到它被更改

我也建议你使用Vue Dev Console来调试vue app。

【讨论】：