Question

我刚刚在尝试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布局文件末尾的测试元素中有效。

我真的迷路了，不知道这是怎么回事。如果任何人都可以对此有所了解，那就太好了。

https://pastebin.com/GkNqFUzy

Answer 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开发人员控制台或浏览器控制台中更改测试者的值，则可以轻松看到它的变化

我还建议您使用Vue Dev Console调试vue应用。

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

1 个答案: