میلاد هدایت پور
4 سال پیش
توسط میلاد هدایت پور
مطرح شد
نخوندن vuejs فقط در یک صفحه
سلام من توی layout-admin ویو جی اس رو ایمپورت کردم و تو صفحه ها هم ازش استفاده کردم و مشکلی نداره
حالا یه layout دیگه برای یوزر ها هم گذاشتم برای سمت کاربر و توی اون هم از ویو استفاده کردم. توی همه صفحه ها ویو جی اس لود میشه جز یه صفحه !
توی اون صفحه layout ادمین رو لود میکنم ویو جی اس کار میکنه!
خیلی روش گیر کردم کدارو میزارم ببینید جایی رو اشتباه کردم مگه!
این user-layout
<!DOCTYPE html>
<html>
<head>
<title>{{\App\Setting::first()->site_name}}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="content-language" content="fa"/>
<meta name="document-type" content="Public"/>
<meta name="document-rating" content="General"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="author" content="Ofoghata"/>
<link href="{{asset('/users/Css/bootstrap.min.css')}}" rel="stylesheet"/>
<link href="{{asset('/users/Css/bootstrap-rtl.min.css')}}" rel="stylesheet"/>
<link href="{{asset('/users/Css/animate.css')}}" rel="stylesheet"/>
<link href="{{asset('/users/Css/Style.css')}}" rel="stylesheet"/>
<link href="{{asset('users/Css/owl-carousel/owl.carousel.min.css')}}" rel="stylesheet"/>
<link href="{{asset('/users/Css/sina-nav.min.css')}}" rel="stylesheet"/>
<link href="{{url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css')}}"
rel="stylesheet"/>
{{-- must be here --}}
{{-- <script src="{{asset('/users/Js/jquery-2.0.0.min.js')}}"></script>--}}
@yield('styles')
</head>
<body id="app">
<header class="nav-container">
<nav class="sina-nav mobile-sidebar navbar-fixed" data-top="60">
<div class="container" >
<div class="extension-nav">
@if(\Illuminate\Support\Facades\Auth::check())
سلام {{\Illuminate\Support\Facades\Auth::user()->name}}
<a id="loginbtn" href="{{url('/logout')}}" class="btn btn-link p-1 ml-2">
<img src="{{asset('/users/Images/Svg/login.svg')}}"/> خروج
</a>
@else
<ul class="pt-2">
<li>
<a id="loginbtn" v-on:click="loginModal()" class="btn btn-link p-1 ml-2">
<img src="{{asset('/users/Images/Svg/login.svg')}}"/> ورود
</a>
</li>
<li>
<a id="loginbtn" v-on:click="registerModal()" class="btn btn-link p-1 ml-2">
<img src="{{asset('/users/Images/Svg/user.svg')}}"/>ثبت نام
</a>
</li>
</ul>
@endif
</div>
<div class="sina-nav-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
<i class="fa fa-bars"></i>
</button>
<a class="sina-brand pl-4" href="Index.html">
<img src="{{asset('/users/Images/logo.png')}}" class="img-fluid"/>
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="sina-menu sina-menu-center IRANSansWeb">
<li><a href="{{url('/')}}">صفحه اصلی</a></li>
<li><a href="{{url('/blog')}}">وبلاگ</a></li>
{{-- <li><a href="Reservationlist.html">جستجوی پیشرفته</a></li>--}}
{{-- <li><a href="Reservation.html">رزرو ملاقات</a></li>--}}
<li><a href="{{url('faq')}}">پرسش و پاسخ</a></li>
<li><a href="{{url('about-us')}}">درباره ما</a></li>
<li><a href="{{url('/contact-us')}}">ارتباط با ما</a></li>
</ul>
</div>
</div>
</nav>
</header>
<!-- content -->
@yield('content')
{{-- login modal --}}
<div class="modal fade bs-example-modal-lg" id="loginModal" tabindex="-1"
role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<section class="container-fluid pt-5 pb-4 pb-lg-0 intro-section">
<section class="text-center text-white m-3">
<h5 class="IRANSansWeb_Bold pb-2">ورود به سایت </h5>
<div id="login" class="box text-center border-top-0 p-lg-4 p-3">
<img src="{{asset('/users/Images/Svg/login.svg')}}" style="width:45px"/>
<p class="text-dark my-3">جهت ورود ، شماره موبایل خود را وارد نمایید</p>
<form class="form-horizontal clearfix" action="{{url('/admin/login')}}" method="post">
{{csrf_field()}}
<input class="form-control mb-3" type="text" name="mobile"
placeholder="شماره موبایل"/>
<span class="validation-summary-errors"
style="color: red"> {{ $errors->first('mobile') }}</span>
<input class="form-control mb-3" type="password" name="password"
placeholder="رمز ورود"/>
<span class="validation-summary-errors"
style="color: red"> {{ $errors->first('password') }}</span>
<button class="btn btn-danger btn-block mb-3 py-3" type="submit">ورود به سایت<i
class="fa fa-chevron-left mr-2"></i></button>
</form>
</div>
</section>
<object class="d-none d-xl-block" type="image/svg+xml"
data="{{asset('users/Images/Svg/desktop-wave.svg')}}"></object>
</section>
</div>
</div>
</div>
</div>
{{-- register modal --}}
<div class="modal fade bs-example-modal-lg" id="registerModal" tabindex="-1"
role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<section class="container-fluid pt-5 pb-4 pb-lg-0 intro-section">
<section class="text-center text-white m-3">
<h5 class="IRANSansWeb_Bold pb-2">ثبت نام در سایت</h5>
<div id="login" class="box border-top-0 p-lg-4 p-3">
<img src="{{asset('/users/Images/Svg/user.svg')}}" style="width:45px"/>
<p class="text-dark my-3">لطفا جهت عضویت ، اطلاعات زیر را وارد نمایید</p>
<form class="form-horizontal clearfix" action="{{url('/register')}}" method="post">
{{csrf_field()}}
<input class="form-control mb-3" type="text" name="name"
placeholder="نام و نام خانوادگی"/>
<span class="validation-summary-errors"
style="color: red"> {{ $errors->first('name') }}</span>
<input class="form-control mb-3" type="text" name="phone"
placeholder="شماره موبایل"/>
<span class="validation-summary-errors"
style="color: red"> {{ $errors->first('phone') }}</span>
<input class="form-control mb-3" type="email" name="email" placeholder="ایمیل"/>
<span class="validation-summary-errors"
style="color: red"> {{ $errors->first('email') }}</span>
<input class="form-control mb-3" type="password" name="password"
placeholder="رمز عبور"/>
<span class="validation-summary-errors"
style="color: red"> {{ $errors->first('password') }}</span>
<input class="form-control mb-3" type="password" name="same_password"
placeholder="تکرار رمز عبور"/>
<span class="validation-summary-errors"
style="color: red"> {{ $errors->first('same_password') }}</span>
<button class="btn btn-danger btn-block mb-3 py-3" type="submit">عضویت در سایت<i
class="fa fa-chevron-left mr-2"></i></button>
</form>
</div>
</section>
<object class="d-none d-xl-block" type="image/svg+xml"
data="{{asset('users/Images/Svg/desktop-wave.svg')}}"></object>
</section>
</div>
</div>
</div>
</div>
<!-- End content -->
<footer class="container-footer mt-5">
<section id="footer-content">
<div class="container">
<div class="row pt-4">
</div>
</div>
</section>
<section id="footer-allright">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<a href="https://www.rtl-theme.com/author/shamim831/" class="text-white ">
کلیه حقوق این قالب برای طراح محفوظ می باشد - عرضه شده تنها در راست چین .
</a>
</div>
</div>
</div>
</section>
</footer>
<!-- All Jquery -->
<script type="text/javascript" src="{{ asset('users/Js/jquery/dist/jquery.min.js')}}"></script>
<script type="text/javascript" src="{{ asset('users/Js/bootstrap-rtl/js/bootstrap.min.js')}}"></script>
<!-- Select 2 -->
<script src="{{asset('users/Js/select2/dist/js/select2.full.min.js')}}"></script>
<script src="{{url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js')}}"></script>
<script
src="{{url('https://cdn.tiny.cloud/1/jzpjpf7ojn73q726332vawyvszaars4zj1ige4wrqw5harf8/tinymce/5/tinymce.min.js')}}"
referrerpolicy="origin">
</script>
<script src="{{asset('users/Js/owl.carousel.js')}}"></script>
<script src="{{url('https://cdn.jsdelivr.net/npm/vue@2.6.11')}}"></script>
<script src="{{url('https://unpkg.com/axios/dist/axios.min.js')}}"></script>
<script src="{{asset('/users/Js/custom.js')}}"></script>
<script>
var variable = new Vue({
el: '#app',
data: {},
methods: {
loginModal() {
$('#loginModal').modal('show');
},
registerModal() {
$('#registerModal').modal('show');
},
},
})
</script>
@if(!$errors->isEmpty())
{{-- <script>$('#loginModal').modal('show');</script>--}}
@if(\Illuminate\Support\Facades\Session::get('error') == "login")
<script>$('#loginModal').modal('show');</script>
@elseif(\Illuminate\Support\Facades\Session::get('error') == "register")
<script>$('#registerModal').modal('show');</script>
@endif
@endif
@yield('scripts')
</body>
</html>
اینم اون صفحه که ویو جی اس رو اجرا نمیکنه:
@extends('layouts.user_layout')
{{--@extends('layouts.layout')--}}
@section('content')
<section class="container mt-5">
<div class="row">
<div class="col-lg-4">
<div>
<div class="my-2 box grad-bg p-4">
<div class="row rounded text-sm-right text-center pt-3">
<div class="col-lg-5 col-sm-3">
<a href="#">
@if($user->image != null)
<img
src="{{asset($user->image)}}" alt="user"
class="img-fluid rounded-circle mb-md-0 mb-3">
@else
<img
src="{{asset('dist/images/1.jpg')}}" alt="user"
class="img-fluid rounded-circle mb-md-0 mb-3">
@endif
</a>
</div>
<div class="col-lg-7 col-sm-9">
<div id="bio" class="text-white">
<h5 class="IRANSansWeb_Medium bt-color">{{$servant->name}}</h5>
<p class="">{{$servant->email}}</p>
<span>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
</span>
<p>11 سال تجربه</p>
</div>
</div>
</div>
</div>
<div class="my-2 box p-4">
<h6 class="IRANSansWeb_Medium bt-color bg-light py-2 px-3 rad25">اطلاعات تماس</h6>
<p>
<span class="IRANSansWeb_Medium"><i class="fas fa-map-marker-alt text-success ml-2"></i>آدرس :</span>
تهران- انتهای بزرگراه صیاد شیرازی شمال- خیابان صنایع- ساختمان ساسان- پلاک 9- طبقه 4- واحد402
</p>
<p>
<span class="IRANSansWeb_Medium"><i
class="fas fa-phone text-success ml-2"></i>تلفن تماس :</span>
01733256458 - 091236547896
</p>
<p>
<span class="IRANSansWeb_Medium"><i class="fas fa-calendar-day text-success ml-2"></i>روزهای حضور:</span>
روزهاي زوج از ساعت 16 به بعد
</p>
<div>
{{--<iframe class="map"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12774.829017508442!2d54.45043830606862!3d36.825534354768585!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3f83350603b80477%3A0xe866c27a957782c!2sClinic+noor+golestan!5e0!3m2!1sen!2sua!4v1565897527166!5m2!1sen!2sua"
frameborder="0" style="border:0;width:100%" allowfullscreen>--}}</iframe>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="box p-md-4 p-2">
<div class="row">
<div class="col-md-12">
<div class="wizard card-like">
<div class="wizard-header">
<div class="row">
<div class="col-sm-12 text-center">
<h5 class="IRANSansWeb_Medium mb-1">
انتخاب زمان نوبت :
</h5>
<p>
لطفا زمان نوبت دلخواه خود را از بین نوبت‌های خالی انتخاب نمایید
</p>
<hr class="pb-3"/>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<h2>دسته بندی ها</h2>
<select class="select2 form-control" id="company" v-model="co_id"
v-on:change="showServices()">
<option value="" disabled selected>دسته بندی خود را انتخاب
کنید
</option>
@foreach($companies as $company)
<option value="{{$company->id}}">{{$company->name}}</option>
@endforeach
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<div v-if="this.showService">
<h2>خدمات</h2>
<select class="select2 form-control" id="service"
v-model="service_id"
v-on:change="showServants()">
<option value="" disabled selected>خدمات خود را انتخاب
کنید
</option>
<option v-for="service in this.services"
:value="service.id">@{{ service.name}}
</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<div v-if="this.showServant">
<h2>پرسنل</h2>
<form action="{{url('/users/show/date')}}" method="post"
style="background-color: white">
{{csrf_field()}}
<input type="hidden" name="service_id"
:value="this.service_id">
<select class="select2 form-control" name="servant_id"
id="service"
onchange="this.form.submit()">
<option value="" disabled selected>پرسنل خود را انتخاب
کنید
</option>
<option v-for="servant in this.servants"
:value="servant.id">@{{servant.name }}
</option>
</select>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@endsection
@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var variable = new Vue({
el: '#app',
data: {
co_id: '',
service_id: '',
servant_id: '',
showService: false,
showServant: false,
showDates: false,
services: {},
servants: {},
},
methods: {
showServices() {
console.log('here1')
axios.get('/users/service/' + this.co_id)
.then(response => {
this.services = response.data
this.showService = true;
}
)
.catch(error => {
this.errors.record(error.response.data)
});
},
showServants() {
console.log('here3')
axios.get('/users/servant/' + this.service_id)
.then(response => {
this.servants = response.data.servants
this.service_id = response.data.service_id
this.showServant = true;
}
)
.catch(error => {
this.errors.record(error.response.data)
});
},
},
created() {
console.log('fsfsgsg');
console.log(this.showService);
}
})
</script>
<script>
$(document).ready(function(){
console.log('sdsdsfsf');
console.log(this.variable.showService);
});
</script>
@endsection
اینجا اخرش که جی کوعری نوشتم هم کنسول لاگ اول اصلا اجرا نمیشه و کنسول دوم میگه showService رو که متغیر ویو جی اس هستو نمیشناسه
لطفا چک کنید راهنمایی کنید
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
به همدیگه کمک کنیم
به میلاد هدایت پور کمک کنید تا مشکل خودش را حل کند؛ این‌طور می‌توانیم با هم پیشرفت کنیم.