I facing a problem with using vue-slick carousel im my laravel project
I import it in main.js file import VueSlickCarousel from 'vue-slick-carousel'
Vue.use(VueSlickCarousel);
components: {
VueSlickCarousel
},
this is the component in my blade file
<VueSlickCarousel :arrows="true" :dots="true">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</VueSlickCarousel>
this is the error in the console
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
please help me, Thanks in advance.
component code:
#push('scripts')
<script type="text/x-template" id="products-slider">
<div class="container" style="overflow:hidden;">
<div class="row">
<div class="col-12">
<h2 class="section-divider">
<span>
{{__('shop::app.home.new-products')}}
</span>
{{-- view all --}}
</h2>
<VueSlickCarousel :arrows="true" :dots="true">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</VueSlickCarousel>
{{-- <section class="regular slider">
#foreach (app('Webkul\Product\Repositories\ProductRepository')->getNewProducts() as $productFlat)
#include ('shop::products.list.old-card', ['product' => $productFlat])
#endforeach
</section> --}}
</div>
</div>
</div>
</script>
<script>
Vue.component('products-slider', {
import VueSlickCarousel from 'vue-slick-carousel',
template: '#products-slider',
components: {
VueSlickCarousel
},
data: function() {
return {
//products datat from API
products: [],
}
},
mounted: function () {
this.fetchProducts();
},
methods: {
// get products API
getProducts () {
return axios.get('{{url("/")}}/api/products?new=1&limit=6&order=desc&sort=created_at')
/* .then(response => {
const products = response.data.data;
this.products = products;
console.log(this.products);
}) */
/*try{
let prod = await axios.get('http://localhost/kshopnew/public/api/products');
const products = prod.data.data;
this.products = products;
}catch(e){
}*/
/*.then(response => {
this.products = response.data
})
.catch(e => {
this.errors.push(e)
})*/
},
// fetch products data
fetchProducts () {
this.getProducts ().then(response => {
const products = response.data.data;
this.products = products;
/* console.log(this.products); */
})
},
}
})
</script>
#endpush
Import vue-slick locally in your component and remove global registration
For example
<script>
import VueSlickCarousel from 'vue-slick-carousel'
export default {
components: {VueSlickCarousel}
}
</script>
In component code:
<script type="text/x-template" id="products-slider">
<div class="container" style="overflow:hidden;">
<div class="row">
<div class="col-12">
<h2 class="section-divider">
<span>
{{__('shop::app.home.new-products')}}
</span>
{{-- view all --}}
</h2>
<VueSlickCarousel :arrows="true" :dots="true">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</VueSlickCarousel>
{{-- <section class="regular slider">
#foreach (app('Webkul\Product\Repositories\ProductRepository')->getNewProducts() as $productFlat)
#include ('shop::products.list.old-card', ['product' => $productFlat])
#endforeach
</section> --}}
</div>
</div>
</div>
</script>
<script>
Vue.component('products-slider', {
template: '#products-slider',
data: function() {
return {
//products datat from API
products: [],
}
},
mounted: function () {
this.fetchProducts();
},
methods: {
// get products API
getProducts () {
return axios.get('{{url("/")}}/api/products?new=1&limit=6&order=desc&sort=created_at')
/* .then(response => {
const products = response.data.data;
this.products = products;
console.log(this.products);
}) */
/*try{
let prod = await axios.get('http://localhost/kshopnew/public/api/products');
const products = prod.data.data;
this.products = products;
}catch(e){
}*/
/*.then(response => {
this.products = response.data
})
.catch(e => {
this.errors.push(e)
})*/
},
// fetch products data
fetchProducts () {
this.getProducts ().then(response => {
const products = response.data.data;
this.products = products;
/* console.log(this.products); */
})
},
}
})
</script>
In main.js:
import VueSlickCarousel from 'vue-slick-carousel'
const app = new Vue({
el: '.element',
components: { VueSlickCarousel } // Note!!!
});
Remember to rebuild the front
my problem is fixed with :
Vue.component("VueSlickCarousel", require("vue-slick-carousel"));
instead of:
import VueSlickCarousel from 'vue-slick-carousel'
components: { VueSlickCarousel }
Related
Can anyone help me? I want to pass the value of my id from URL in my vue component.
Here's my code:
URL: admin/event/1 <---- pass the parameter "1" to my vue component
index.blade.php
<div class="content">
<div class="container-fluid">
<div id="app">
<component></component>
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>
vue component:
<script>
export default{
data(){
return{
oadi matches:[]
}
},
created(){
this.loadItem();
},
methods: {
loadItem(){
axios.get(`/api/event/`) <---- HEREEE i want to pass the id here
.then(res => {
this.matches = res.data.data;
console.log('loaded');
})
.catch(err => {
console.log(err);
});
},
}
};
</script>
controller:
public function list($id)
{
$matches = List::where('id',$id)->get();
dd($id);
}
api.php
Route::get('event/{id}','controller here');
I am trying to get the details of a particular movie in a list of movies but it cannot get the particular id.
here is my Vue component:
<template>
<div>
<el-row :gutter="10">
<el-col :span="6" v-for="movie in movies" v-bind:key="movie">
<el-card shadow="always" :body-style="{ padding: '0px'} ">
<img v-bind:src="movie.cover_photo" class="image">
<div style="padding: 14px;">
<div class="bottom clearfix">
{{movie.title}}
<h4>{{ movie.year }}</h4>
<h4>{{ movie.type }}</h4>
</div>
<div class="block">
<el-rate v-model="value1" :max="10"></el-rate>
</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
movies: [],
movie: {
id: '',
}
};
},
created() {
this.fetchMovieList();
},
methods: {
fetchMovieList() {
axios.get('/movies').then(response => {
this.movies = response.data;
})
.catch(error => console.log(error))
},
showMovie(id) {
axios.get('/movies/' + id).then((res) => {
if (res.data.status == true) {
this.movie = res.data.movie;
console.log(res.data.movie)
} else {
alert('No Movie founded with this id')
}
}).catch((err) => {
alert('error')
})
}
}
}
</script>
<style scoped>
.image {
width: 100%;
display: block;
}
</style>
my show method:
public function show($id)
{
$movie=Movie::find($id);
if($movie){
return response()->json(['status'=>true,'movie'=>$movie]);
}else{
return response()->json(['status'=>false]);
}
}
and my route:
Route::get('/movies/{id}', 'MoviesController#show');
It cannot find the movie with the particular id. What could be wrong? When I visit the API URL directly on the browser and directly type the route I get the particular movie I want.
Not sure if this would resolve all your issues but you could try the following:
Route::get('/movies/{movie}', 'MoviesController#show');
public function show(Movie $movie)
{
return view('details', ['movie' => $movie]);
}
Also, the naming convention for controllers is to use the model name in its singular form. Your controller should therefore be named MovieController without s.
Another thing, in your view component you should include the movie_id in the url otherwise Laravel has no way to know which movie you're trying to fetch:
...
axios.get('/movies/1')
...
I'm developing chat app on laravel using vue.js and i'm new to vue.js.
but i'm getting below mentioned error, please help me solve this
Error1 :
[Vue warn]: Property or method "contact" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property
Error2 :
[Vue warn]: Error in render: "TypeError: Cannot read property 'avatar' of undefined"
/ ChatApp.vue file/
<template>
<div class="chat-app">
<Conversation :contact="selectedContact" :messages="messages"/>
<ContactsList :contacts="contacts"/>
</div>
</template>
<script>
import Conversation from './Conversation.vue';
import ContactsList from './ContactsList.vue';
export default {
props: {
user: {
type: Object,
required: true
}
},
data(){
return {
selectedContact: null,
messages: [],
contacts: []
};
},
mounted(){
axios.get('/contacts')
.then((response) => {
this.contacts = response.data;
});
},
methods: {
startConversationWith(contact) {
axios.get(`/conversation/$(contact.id)`)
.then((response) => {
this.messages = response.data;
this.selectedContact = contact;
})
}
},
components: { ContactsList, Conversation }
};
</script>
/ ContactsList.vue file/
<template>
<div class="contacts-list">
<ul v-if="contacts.length > 0">
<li v-for:"(contact, index) In contacts" :key="contact.id"
#click="selectContact(index, contact)" :class="{ 'selected' : index ==
selected}">
<div class="avatar">
<img :src="contact.avatar" :alt="contact.name">
</div>
<div class="contact">
<p class="name">{{ contact.name }}</p>
<p class="email">{{ contact.email }}</p>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
contacts: {
type: Array,
default: []
}
},
data() {
return {
selected: 0
};
},
methods: {
selectContact(index, contact) {
this.selected = index;
this.$emit('selected', contact);
}
}
};
</script>
/ conversation.vue /
<template>
<div class="conversation">
<h1>{{ contact ? contact.name : 'Select a contact' }}</h1>
<MessagesFeed :contact="contact" :messages="messages" />
<MessageComposer #send="sendMessage" />
</div>
</template>
<script>
import MessagesFeed from './MessagesFeed.vue';
import MessageComposer from './MessageComposer.vue';
export default {
props: {
contact: {
type: Object,
default: null
},
messages: {
type: Array,
default: []
}
},
methods:{
sendMessage(text) {
console.log(text);
}
},
components: {MessagesFeed, MessageComposer}
};
</script>
#Akash you can use it this way :
data() {
return {
contactsNotEmpty:false
}
},
// ...
mounted() {
axios.get('/contacts')
.then((response) => {
this.contacts = response.data;
this.contactsNotEmpty = true;
});
}
<ul v-if="contactsNotEmpty">
...
</ul>
also you may check this vuejs article about what is happening : https://vuejs.org/2016/02/06/common-gotchas/#Why-isn%E2%80%99t-the-DOM-updating
I guess you can do it like that:
<ul v-if="contacts.length > 0">
<li v-for="contact in contacts" :key="contact.id">
<div class="avatar">
<img :src="contact.avatar" :alt="contact.name">
</div>
<div class="contact">
<p class="name">{{ contact.name }}</p>
<p class="email">{{ contact.email }}</p>
</div>
</li>
</ul>
The first error is throwing in your Conversation.vue, you were passing data to a child component, you have to make sure it is defined as a prop in that component
export default{
props: ['contact']
};
and if it is defined, your prop type is not expecting a null value. I would change it to string and on rendering in my ChatApp.vue, I would set selectedContact to string.Empty||''
For the second error, the avatar key is missing from your response object. You have to check if it is present first before accessing it. Kindly refer to El Alami Anas's answer above.
So I have this code:
<template>
<div id="search-wrapper">
<div>
<input
id="search_input"
ref="autocomplete"
placeholder="Search"
class="search-location"
onfocus="value = ''"
#keyup.enter.native="displayPic"
>
</div>
</div>
</template>
<script>
import VueGoogleAutocomplete from "vue-google-autocomplete";
export default {
data: function() {
return {
search_input: {},
pic: {}
};
},
mounted() {
this.autocomplete = new google.maps.places.Autocomplete(
this.$refs.autocomplete
);
this.autocomplete.addListener("place_changed", () => {
let place = this.autocomplete.getPlace();
if (place.photos) {
place.photos.forEach(photo => {
let pic=place.photos[0].getUrl()
console.log(pic);
});
}
});
},
methods: {
displayPic(ref){
this.autocomplete = new google.maps.places.Autocomplete(
this.$refs.autocomplete);
this.autocomplete.addListener("place_changed", () => {
let place = this.autocomplete.getPlace();
if (place.photos) {
place.photos.forEach(photo => {
let pic=place.photos[0].getUrl()
console.log(pic);
});
}
})
},
}
}
I want to pass the "pic" parameter, resulted in displayPic, which is a function, into my template, after one of the locations is being selected.
I've tried several approaches, but I'm very new to Vue so it's a little bit tricky, at least until I'll understand how the components go.
Right now, the event is on enter, but I would like it to be triggered when a place is selected.
Any ideas how can I do that?
Right now, the most important thing is getting the pic value into my template.
<template>
<div id="search-wrapper">
<div>
<input style="width:500px;"
id="search_input"
ref="autocomplete"
placeholder="Search"
class="search-location"
onfocus="value = ''"
v-on:keyup.enter="displayPic"
#onclick="displayPic"
>
<img style="width:500px;;margin:5%;" :src="pic" >
</div>
</div>
</template>
<script>
import VueGoogleAutocomplete from "vue-google-autocomplete";
export default {
data: function() {
return {
search_input: {},
pic:""
};
},
mounted() {
this.autocomplete = new google.maps.places.Autocomplete(
this.$refs.autocomplete,
{componentRestrictions: {country: "us"}}
);
},
methods: {
displayPic: function(){
this.autocomplete.addListener("place_changed", () => {
let place = this.autocomplete.getPlace();
if (place.photos) {
place.photos.forEach(photo => {
this.pic=place.photos[0].getUrl()
});
}
})
},
}
}
</script>
I need help with my code please. I can't figure it out. I'm getting a "TypeError: this.$http is undefined" and it's driving me insane. I trace it to $http, but I have no idea how to fix it. I've just finished my Laravel course, but Vue.js is new to me. Here's is my code:
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-body">
<textarea rows="3" class="form-control" v-model="content"></textarea>
<br>
<button class="btn btn-success pull-right" :disabled="not_working" #click="create_post()">
Create a post
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
},
data() {
return {
content: '',
not_working: true
}
},
methods: {
create_post() {
this.$http.post('/create/post', { content: this.content })
.then((resp) => {
this.content = ''
noty({
type: 'success',
layout: 'bottomLeft',
text: 'Your post has been published !'
})
console.log(resp)
})
}
},
watch: {
content() {
if(this.content.length > 0)
this.not_working = false
else
this.not_working = true
}
}
}
</script>
I think you have a error in submitting the post request.
you need to learn about axios.
Try this example.
axios.post('/create/post', this.content).then((response) => {
// do something
})
npm install axios --save
Add Axios to your Vue.js project, you have to import it:
<script>
import axios from 'axios';
export default {
data() {
return {
posts: [],
errors: []
}
},
created() {
let payload={
content:this.content
}
axios.post('/create/post',payload)
.then(response => {
this.posts = response.data
})
.catch(e => {
this.errors.push(e)
})
}
}
</script>