[英]How can I add condition to call vue component if local storage javascript exist in view blade laravel?
[英]I can't connect vue to my Laravel blade view
我正在尝试将我的App Vue与Laravel连接起来,我能够通过“用户”路线实现它,但是当尝试连接第二部分时,我做不到,只是不允许我连接,不知道我做错了什么,我是使用vue的新手。
当我连接#crudUsuarios时,一切正常,但是当我连接#crudLessons时,未显示数据。 我尝试了这些路线,它们实际上起作用了,它们返回了我想要的数据,但是当连接时它什么也没显示。
我还在视图中未显示“ #crudUsarios”的位置出现错误:app.js:2626 [Vue警告]:找不到元素:#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;
}
您需要有一个div,其ID对应于您使用el
属性将Vue实例附加到的ID
<div id="crudUsuarios">
@{{ data }}
</div>
app.js
两次将const app
定义为Vue实例 一个常数只能以相同的名称存在一次
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.