Laravel 简单Vue组件没有'；I don’我不能在第一个分区上工作，只能在第二个分区上工作_Laravel_Vue.js

Laravel 简单Vue组件没有'；I don’我不能在第一个分区上工作，只能在第二个分区上工作

laravel vue.js

Laravel 简单Vue组件没有'；I don’我不能在第一个分区上工作，只能在第二个分区上工作,laravel,vue.js,Laravel,Vue.js,我目前正在尝试学习基本的vue.js组件。这是我的密码 chat.blade.php @extends('layouts.app') @section('content') <div class="container"> <div class="row"> <div class="col-md-3"> <div id="components-demo">

我目前正在尝试学习基本的vue.js组件。这是我的密码

chat.blade.php

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div id="components-demo">
                    <div class="card">
                        <div class="card-header">Users</div>
                        <div class="card-body">
                            <ul class="list-group list-group-flush">
                                <button-counter></button-counter>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div id="chat-component" class="col-md-9">
                {{--<chat-component v-bind:auth-user="{{$user}}" v-bind:other-user="{{ $otherUser }}"></chat-component>--}}
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
    </script>
@endsection

...
<body>
   ...
   <div id="app">
      ...
      @yield('content')
      ...
   </div>
   ...
</body>
...

@extends（'layouts.app'））
@节（“内容”）
使用者


{{----}}
@端部
@节（'js'）
@端部

app.js

require('./bootstrap')

window.Vue = require('vue')


// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component(
    'chat-component',
    require('./components/ChatComponent.vue').default
);
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});


const app = new Vue({
  el: '#app'
});
new Vue({ el: '#components-demo' });

require('./bootstrap')

window.Vue = require('vue')


// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component(
    'chat-component',
    require('./components/ChatComponent.vue').default
);
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});


const app = new Vue({
  el: '#app'
});

require（“./bootstrap”）
window.Vue=require（'Vue'）
//const files=require.context（'./'，true，/\.vue$/i）
//files.keys（）.map（key=>Vue.component（key.split（'/'）.pop（）.split（'.'）[0]，files（key.default））
Vue组件(
“聊天组件”，
需要（'./components/ChatComponent.vue'）。默认值
);
Vue.组件（“按钮计数器”{
数据：函数（）{
返回{
计数：0
}
},
模板：“你点击了我{{count}}}次。”
});
const app=新的Vue({
el:“#应用程序”
});
新的Vue（{el:'#组件演示'}）；

问题是当我尝试单击按钮时，计数不起作用。但是，如果我添加另一个具有相同id的相同组件div，它将适用于第二个div中的按钮

        <div class="col-md-3">
            <div id="components-demo">
                <div class="card">
                    <div class="card-header">Users</div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush">
                            <button-counter></button-counter>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="components-demo">
                <div class="card">
                    <div class="card-header">Users</div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush">
                            <button-counter></button-counter>
                        </ul>
                    </div>
                </div>
            </div>
        </div>


使用者


使用者

为什么它只在第二分区工作？有什么我遗漏的吗？提前感谢。

您正在注册多个Vue实例。您可以在单个Vue实例上注册多个组件

app.js

require('./bootstrap')

window.Vue = require('vue')


// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component(
    'chat-component',
    require('./components/ChatComponent.vue').default
);
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});


const app = new Vue({
  el: '#app'
});
new Vue({ el: '#components-demo' });

require('./bootstrap')

window.Vue = require('vue')


// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component(
    'chat-component',
    require('./components/ChatComponent.vue').default
);
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});


const app = new Vue({
  el: '#app'
});

require（“./bootstrap”）
window.Vue=require（'Vue'）
//const files=require.context（'./'，true，/\.vue$/i）
//files.keys（）.map（key=>Vue.component（key.split（'/'）.pop（）.split（'.'）[0]，files（key.default））
Vue组件(
“聊天组件”，
需要（'./components/ChatComponent.vue'）。默认值
);
Vue.组件（“按钮计数器”{
数据：函数（）{
返回{
计数：0
}
},
模板：“你点击了我{{count}}}次。”
});
const app=新的Vue({
el:“#应用程序”
});

必须确保app.blade.php文件中的标识符为app

布局/app.blade.php

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div id="components-demo">
                    <div class="card">
                        <div class="card-header">Users</div>
                        <div class="card-body">
                            <ul class="list-group list-group-flush">
                                <button-counter></button-counter>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div id="chat-component" class="col-md-9">
                {{--<chat-component v-bind:auth-user="{{$user}}" v-bind:other-user="{{ $otherUser }}"></chat-component>--}}
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
    </script>
@endsection

...
<body>
   ...
   <div id="app">
      ...
      @yield('content')
      ...
   </div>
   ...
</body>
...

。。。
...
...
@产量（‘含量’）
...
...
...

然后，当您注册多个Vue实例时，您的组件应能正常工作。您可以在单个Vue实例上注册多个组件

app.js

require('./bootstrap')

window.Vue = require('vue')


// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component(
    'chat-component',
    require('./components/ChatComponent.vue').default
);
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});


const app = new Vue({
  el: '#app'
});
new Vue({ el: '#components-demo' });

require('./bootstrap')

window.Vue = require('vue')


// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component(
    'chat-component',
    require('./components/ChatComponent.vue').default
);
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});


const app = new Vue({
  el: '#app'
});

require（“./bootstrap”）
window.Vue=require（'Vue'）
//const files=require.context（'./'，true，/\.vue$/i）
//files.keys（）.map（key=>Vue.component（key.split（'/'）.pop（）.split（'.'）[0]，files（key.default））
Vue组件(
“聊天组件”，
需要（'./components/ChatComponent.vue'）。默认值
);
Vue.组件（“按钮计数器”{
数据：函数（）{
返回{
计数：0
}
},
模板：“你点击了我{{count}}}次。”
});
const app=新的Vue({
el:“#应用程序”
});

必须确保app.blade.php文件中的标识符为app

布局/app.blade.php

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div id="components-demo">
                    <div class="card">
                        <div class="card-header">Users</div>
                        <div class="card-body">
                            <ul class="list-group list-group-flush">
                                <button-counter></button-counter>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div id="chat-component" class="col-md-9">
                {{--<chat-component v-bind:auth-user="{{$user}}" v-bind:other-user="{{ $otherUser }}"></chat-component>--}}
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
    </script>
@endsection

...
<body>
   ...
   <div id="app">
      ...
      @yield('content')
      ...
   </div>
   ...
</body>
...

。。。
...
...
@产量（‘含量’）
...
...
...

然后，您的组件应该可以正常工作