我刚刚在尝试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布局文件末尾的测试元素中有效。
我真的迷路了,不知道这是怎么回事。 如果任何人都可以对此有所了解,那就太好了。
答案 0 :(得分: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应用。