تغییر فایل vue در لاراول
سلام دوستان من یه Sample ساده که vue وlaravel هست رو دانلود کردم
اینم لینکش
https://github.com/fagray/vuejs2-laravel53-starterاینم فایلroute.js
import VueRouter from 'vue-router'
//Define route components
const Home = { template: '<div>ddd home</div>' }
const Foo = { template: '<div>ddd Foo</div>' }
const Bar = { template: '<div>Bar</div>' }
// lazy load components
const Room = (resolve) => require(['./components/Room.vue'], resolve)
export default new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/', component: Home },
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
{ path: '/rooms', component: Room } // example of route with a seperate component
]
});حال من تغییراتی که میدم مثلن نامشو میخوام عوض کنم توی خروجی همون نام قبلی هست هیچ تغیر نمی کنه
مشکل از کجاست؟
مثلن نام زیر رو میخوام تغییر بدم
<div>home</div>به صورت زیر
<div>ddd home</div>اما تغییرات اعمال نمیشه
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
نمیدونم چرا تغییر میدم داخل div هر template رو چیزی اعمال نمیشه
برای اجراش
باید از فرمامین زیر استفاده کنم؟
run npm dev
or
run npm wathconst Home = { template: '<div>ddd home</div>' }
const Foo = { template: '<div>ddd Foo</div>' }
const Bar = { template: '<div>Bar</div>' }بله کدهای vue رو باید با laravel mix فشرده کنید و بذارید توی صفحه اصلی بعد ناحیه app رو هم تعیین کنید،
در ضمن اگه پروژه لاراولی هست نیازی به vue router نیست، صرفا کامپوننت رو درست کنید و بعد فشرده و فراخوانی کنید بعد هر جا میخواین بیاریدش اسمش رو فراخوانی کنید، روت ها رو هم با روت خود لاراول بزنید
این صفحه بلید اصلی:
<!doctype html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
{!! SEO::generate() !!}
@include('front.include.css')
</head>
<body>
@include('front.include.header')
<div id="app">
@yield('center')
</div>
@include('front.include.footer')
@include('front.include.js')
<script>
window.Laravel = {};
window.Laravel.Auth = '{{ Auth::check() }}' == '' ? false : true;
window.Laravel.csrfToken = '{{ csrf_token() }}'
</script>
@yield('script')
</body>
</html>این صفحه app.js:
import './bootstrap';
import Like from './components/Like.vue';
import Follow from './components/Follow.vue';
Vue.component('Like', Like);
Vue.component('Follow', Follow);
const app = new Vue({
el: '#app',
});این هم صفحه کامپوننت لایک :
<template>
<div class="d-flex flex-row justify-content-center">
<a href="" @click.prevent="likeIt">
<i class="fa fa-thumbs-o-up pl-2" style="font-size: 20px"></i>
</a>
<p style="font-size: 16px">{{likes}}</p>
</div>
</template>
<script>
export default {
data(){
return {
likes: 0,
Laravel : window.Laravel,
}
},
props: [
'likable_type', 'likable_id', 'user_id',
],
mounted(){
axios.post('/api/web/getLike',{
likable_type: this.likable_type,
likable_id: this.likable_id,
})
.then(response => {
this.likes = response.data.likes
})
.catch(function (error) {
console.log(error);
});
},
methods: {
likeIt(){
if (this.Laravel.Auth) {
axios.post('/api/web/saveLike', {
likable_type: this.likable_type,
likable_id: this.likable_id,
user_id: this.user_id,
})
.then(response => {
if (response.data.data == 'deleted') {
this.likes -= 1;
} else {
this.likes += 1;
}
})
.catch(function (error) {
console.log(error);
});
}else{
window.location.href = '/login'
}
}
}
}
</script>این هم صفحه لاراول میکس:
const { mix } = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/assets/js/app.min.js')
.sass('resources/assets/sass/app.scss', 'public/assets/css/app.min.css');داده ها رو هم با api از سرور میگیرم و تغییرات رو انجام میدم
این هم فراخوانی کامپوننت لایک توی بلیدهای لاراول هست :
<Like likable_type="answer" :likable_id="{{$answer->id}}"
:user_id="{{auth()->user()->id}}"></Like>@alirezasafdari
حال ابن نحوه فراخوانی روت کجاست
منظورم اینه که ما چندتا کامپونت داشته باشیم نحوه فراخوانیش چطوره
در واقع من دارم یه پنل ادمین طراحی می کنم
میخوام روی هر آپشن کلیک کرده بره توی صفحه دیگه
اینو توی لاراول می خوام
ببینید دو حالته، یکبار شما میخواین کل پنل ادمین spa بشه واسه اون باید از vue router استفاده کنید
ولی یکبار کل پنل ادمین رو با خود بلیدهای لاراول زدید، و میخواین مثلا یک قسمت کوچیک توی یک صفحه مثلا دکمه لایک رو درست کنید اینجا از کامپوننت vue استفاده میکنید و اسم همون کامپوننت رو همون جایی که میخواین استفاده کنید فراخوانی میکنید شبیه همون چیزی که فرستادم توی پیام آخری،
اگه میخواین روی یک آپشن کلیک کنید بره صفحه دیگه، اینجا یا صفحه بعدی لود میشه که باید با روت خود لاراول انجام بدید یا صفحه لود نمیشه و spa هست که با vue router