我无法访问 vue 的消息变量

Question

消息未显示在我的刀片中 @{{消息}}

@extends('app')
@section('content')
<section id="form">
<div class="container" id="app"> @{{message}} </div>
</section><!--/form-->
@endsection
@mainScript('scripts')
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app1 = new Vue({
el: '#app',
data: function () {
return {
message: 'Welcome to vue'
}
}
})
</script>
@mainScript

我们为什么以及如何解决这个问题？

我正在使用拉拉维尔刀片，这不适用于刀片

吗

Answer 1

基于对您的评论的回答。

您可以在一个页面上拥有多个 Vue 应用程序，如下所示：

@extends('app')
@section('content')
<section id="form">
<div class="container" id="app1"> @{{message}} </div>
<div class="container" id="app2"> @{{message}} </div>
</section><!--/form-->
@endsection
@mainScript('scripts')
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app1 = new Vue({
el: '#app1',
data: {
message: 'Welcome to vue app1'
}
})
var app2 = new Vue({
el: '#app2',
data: {
message: 'Welcome to vue app2'
}
})
</script>
@mainScript