我无法将vue连接到我的Laravel刀片视图

Question

I am trying to connect my app vue with Laravel, I was able to achieve it with the "users" route but when trying to connect the second part, I can't do it, it just doesn't allow me to connect, I don't know if I'm doing things wrong, I'm new using vue.

When I connect #crudUsuarios everything works but when I connect #crudLessons data is not shown. I tried the routes and they actually work, they return the data I want, however when connected it shows nothing.

I also get an error in the view that is not where it shows "#crudUsarios" Error: app.js: 2626 [Vue warn]: Cannot find element: #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

LessonsController.php

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

        return $products;
    }

Answer 1

You need to have a div with an ID corresponding to the ID you're attaching the Vue instance to using the el attribute

<div id="crudUsuarios">
  @{{ data }}
</div>

Side Note

• You're defining const app as a Vue Instance twice in your app.js

A constant should only exist once by the same name