Pass parameter in vue component - laravel

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');

Related

problem with vue-slick in laravel project

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 }

How to Fetch data using Vue Js laravel

How do I fetch data using vue js and laravel . I have created vue component and controller.
Here is my database table structure
<script>
export default {
data(){
return {
kudos : []
}
},
created(){
axios.get('./api/kudos')
.then(response => this.kudos = response.data);
}
}
</script>
What I need to do is fetch the database data to blade file using vuejs .
Could someone guide me step by step?
Controller
Vue Component
Blade File
I think you're looking for something like this?
Controller:
public function searchDatabase( Request $request )
{
$foo = DB::table('bar')
->where([
["description", 'LIKE', "%{$request->input('query')}%"]
])
->limit(5)
->get();
return response()->json($foo);
}
YourComponent.vue
<template>
<div id="wrapper">
<div class="input-group">
<input type="text" placeholder="Search database.." v-model="query" v-on:keyup="autoComplete" class="form-control">
</div>
<div class="panel-footer" v-if="results.length">
<table class="table table-sm">
<tr v-bind:key="result" v-for="result in results">
<td> {{ result.description }} </td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default{
data(){
return {
query: '',
url: '/search/blade/route',
results: []
}
},
methods: {
autoComplete(){
this.results = [];
if(this.query.length > 2){
axios.get('/api/kudos', {params: {query: this.query}}).then(response => {
this.results = response.data;
});
}
}
}
}
</script>
search.blade.php
<your-component></your-component>
Add the name of your data in your response
<script>
export default {
data(){
return {
kudos : []
}
},
created(){
axios.get('./api/kudos')
.then(response => this.kudos = response.data.NameOfYourData);
}
}
</script>

Property or method "contact" is not defined on the instance but referenced during render Vuejs Laravel

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.

Passing parameter from axios to laravel

In my application I'm working with comment, each product has its own comment.Comment in MySql contains column 'computer_comment' with foreign key(id).When I send 'computer_comment' from axios to laravel comments doesn't shown, I guess that 'computer_comment' is null or undefined.
I tried to send 1 or 2 instead 'computer_comment', in this case it works.
CommentComponent.vue
<template>
<div>
<div v-for="l in list">
<div v-if="l.computer_comment==current">
<div class="card" >
<div class="card body" >
<h4 style="text-decoration: underline">{{l.name}}</h4>
<p >{{l.body}}</p>
</div>
</div>
<br>
</div>
</div>
</div>
</template>
<script>
export default{
props: ['message'],
data(){
return{
list: [],
comment:{
id: '',
user_comment: '',
computer_comment: '',
name: '',
body: ''
},
current: this.message
}
},
created() {
this.show_comment();
},
methods: {
show_comment(){
axios.get('/current_comment').then(result => {
this.list = result.data;
console.log(result.data);
});
},
removeCom(id){
axios.post('/remove/'+id).then(result => {
this.show_comment();
}).catch(err => {
console.log(err);
});
}
},
}
</script>
info.blade.php
<div id="info">
<comment message="{{$computer->id}}"></comment>
.....
</div>

Laravel/Vue.js issues

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>

Resources