Question

消息未显示在我的刀片服务器@ {{message}}

中

@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

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

我正在使用laravel刀片，这不适用于刀片

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

我无法访问vue的message变量

1 个答案: