Javascript 我能'；t将vue连接到我的Laravel刀片视图

我正在尝试将我的应用程序vue与Laravel连接起来，我能够通过“用户”路线实现它，但当尝试连接第二部分时，我无法做到，它只是不允许我连接，我不知道我是否做错了，我是新使用vue的人

当我连接#crudUsuarios时，一切正常，但当我连接#crudLessons时，数据不显示。 我尝试了这些路由，它们确实工作了，它们返回我想要的数据，但是当连接时，它什么也没有显示

我在视图中也发现了一个错误，它没有显示“crudUsarios” 错误：app.js:2626[Vue warn]：找不到元素：#crudUsuarios

app.js

// require('./bootstrap');

window.Vue = require('vue');

window.moment = require('moment');

window.axios = require('axios');


// import toastr from 'toastr'

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({
    el: '#crudUsuarios',

    created: function()
    {
        this.getUsers();
    },

    data: {
        time: moment().format('Y-M-d H:mm:ss'),
        users: [],
        newName: '', newfLastName : '', newsLastName : '', newAge : '', newEmail: '', newCellphone : '', newPassword: '',
        fillUser: {'id' : '', 'slug': '', 'name' : '','fLastName' : '','sLastName' : '','age' : '','email' : '', 'cellphone' : '', 'password' : ''},
        getUser: {'id' : '', 'slug': '','name' : '','fLastName' : '','sLastName' : '','age' : '','email' : '', 'cellphone' : '', 'password' : ''},
        errors: []
    },

    methods: {
        getUsers: function()
        {
            //Aqui es donde conecta a la ruta para jalar los datos
            var urlUsers = 'users';
            axios.get(urlUsers).then(response =>{
                this.users = response.data
            });
        },

        editUser: function(user){
            this.fillUser.id = user.id;
            this.fillUser.name = user.name;
            this.fillUser.fLastName = user.fLastName;
            this.fillUser.sLastName = user.sLastName;
            this.fillUser.age = user.age;
            this.fillUser.email = user.email;
            this.fillUser.cellphone = user.cellphone;
            this.fillUser.password = user.password;
            $('#edit').modal('show');
        },

        updateUser: function(id){
            // alert('Nada man');
            var url = 'users/' + id;
            axios.put(url, this.fillUser).then(response => {
                this.getUsers();
                this.fillUser = {'id' : '','name' : '','fLastName' : '','sLastName' : '','age' : '','email' : '', 'cellphone' : '', 'password' : ''};
                this.errors = [];
                $('#edit').modal('hide');
                toastr.success('Usuario actualizado con éxito');
            }).catch(error => {
                this.errors = error.response.data
            });
        },

        deleteUser: function(user)
        {
            var url = 'users/' + user.id;

            if (confirm("¿Eliminar usuario?") == true) {
                axios.delete(url).then(response => {
                    this.getUsers();
                    toastr.success('Usuario eliminado con éxito');
                });
            } else {
                this.getUsers();
            }


        },

        createUser: function()
        {
            var url = 'users';
            axios.post(url, {
                name: this.newName,
                fLastName: this.newfLastName,
                sLastName: this.newsLastName,
                age: this.newAge,
                email: this.newEmail,
                cellphone: this.newCellphone,
                password: this.newPassword
            }).then(response => {
                this.getUsers();
                //Vaciar los campos de creacón una vez creado el usuario.
                this.newName= '', this.newfLastName= '', this.newsLastName = '', this.newAge = '', this.newEmail= '', this.newCellphone = '', this.newPassword= '',
                this.errors = [];
                $('#create').modal('hide');
                toastr.success('Nuevo usuario creado con éxito');

                // Código para que no se quede activo el MODAL
                if ($('.modal-backdrop').is(':visible')) {
                    $('body').removeClass('modal-open');
                    $('.modal-backdrop').remove();
                };

            }).catch(error => {
                this.errors = error.response.data
            });
        },

        showUser: function (user) {

            var url = 'users/'+user.id;
            axios.get(url).then(response =>{

                // alert('nada de nada');
                this.getUser.id = user.id;
                this.getUser.slug = user.slug;
                this.getUser.name = user.name;
                this.getUser.fLastName = user.fLastName;
                this.getUser.sLastName = user.sLastName;
                this.getUser.age = user.age;
                this.getUser.email = user.email;
                this.getUser.cellphone = user.cellphone;
                this.getUser.password = user.password;
                this.getUser.created_at = user.created_at;
                $('#show').modal('show');
            });
        }

    }
});

// /var urlUsers = 'https://randomuser.me/api/?results=10';
const app = new Vue({
    el: '#crudLessons',

    created: function()
    {
        this.getLessons();
    },

    data: {
        lessons: [],
        // newName: '', newfLastName : '', newsLastName : '', newAge : '', newEmail: '', newCellphone : '', newPassword: '',
        // fillUser: {'id' : '','name' : '','fLastName' : '','sLastName' : '','age' : '','email' : '', 'cellphone' : '','password' : ''},
        getLesson: {'id' : '','fecha' : '','inicio' : '','final' : '', 'user_name' : '', 'user_fLastName' : '', 'user_sLastName' : '', 'user_email' : '', 'user_cellphone' : '', 'created_at' : ''},
        errors: []
    },
    methods: {
        getLessons: function()
        {
            //Aqui es donde conecta a la ruta para jalar los datos
            var urlLessons = 'lessons';
            axios.get(urlLessons).then(response =>{
                this.lessons = response.data
            });
        },

    }
});

index.blade.php

@extends('layouts.material')

@section('content')

<div class="col-lg-12" id="crudLessons">

    <div class="card">

       <h4> @{{ $data }} </h4>

    </div>
</div>

@endsection

---

您需要有一个div，其ID与使用

el

属性将Vue实例附加到的ID相对应

@{{data}}

旁注

• 在

  app.js

---

一个常量应该只存在一次，名称相同

您好，感谢您的响应，实际上，您将其按指示放置，它正确地为我带来了所有信息，另一个实例（#crudLessons）是不允许我带来信息的实例，我已经修改了常量的名称，例如：const app=new Vue:({/const lesson=new Vue:（{//代码，但仍然没有给我带来数据，正如我所说，使用#crudUsarios，一切都正常工作。

public function index()
    {
//        $products = Lesson::orderBy('id', 'DESC')->get();
        $products = Lesson::with('user')->OrderBy('id', 'DESC')->get();

        return $products;
    }