javascript - 我无法将 vue 连接到我的 Laravel Blade View

Question

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

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

我在显示“#crudUsarios”的 View 中也出现错误错误:app.js:2626 [Vue warn]:找不到元素:#crudUsuarios

应用程序.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
            });
        },

    }
});

索引.blade.php

@extends('layouts.material')

@section('content')

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

    <div class="card">

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

    </div>
</div>

@endsection

类(class) Controller .php

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

        return $products;
    }

Answer 1

您需要一个 div，其 ID 与您使用 el 属性附加 Vue 实例的 ID 相对应

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

旁注

• 您在 app.js 中两次将 const app 定义为 Vue 实例

同名常量只能存在一次