I have a problem with Vue and component data function. It breaks even though all referenced prop data are correctly passed to the component and I can see them in vue-devtools. I am passing data from Laravel.
Vue Error:
[Vue warn]: Error in data(): "TypeError: Cannot read property 'isFavorited' of undefined"
found in
---> <FavBtn> at /Applications/MAMP/htdocs/decimacen.cz/resources/assets/js/components/FavBtn.vue
<Root>
FavBtn component:
<template>
<a href="#" class="btn-link text-danger" v-on:click="ToggleFav">
<i v-bind:class="{ 'fa fa-heart fa-2x': isFavorited == true, 'fa fa-heart-o fa-2x': isFavorited == false }" class="" aria-hidden="true"></i>
</a>
</template>
<script>
export default {
name: 'FavBtn',
props: ['fav'],
data(){
return{
isFavorited: this.fav.isFavorited,
favoritable_id: this.fav.favoritable_id,
}
},
methods: {
ToggleFav: function () {
this.AjaxRequest();
this.ToggleDOM();
},
ToggleDOM: function () {
this.isFavorited = !(this.isFavorited);
},
AjaxRequest: function () {
if (this.isFavorited)
{
axios.delete('favorites/' + this.favoritable_id)
}
else {
axios.post('favorites/' + this.favoritable_id);
}
}
}
}
</script>
Here is how I use the compnent in view:
<fav-btn v-bind:fav="{{ $user_store }}"></fav-btn>
All I want to know is if I have any mistakes in my code. Thanks.
Edit
Source:
<fav-btn v-bind:fav="{"favoritable_id":3,"favoritable_type":"App\\Store","created_at":"2017-05-24 16:12:33","updated_at":"2017-05-24 16:12:33","deleted_at":null,"isFavorited":true,"pivot":{"user_id":1,"favoritable_id":3},"users":[{"id":1,"email":"hagen#wagen.cz","permissions":[],"last_login":"2017-05-25 13:38:38","name":"Franta Hagen","currency_id":1,"sid":"1400076495925ae8d480b95925ae8d480c3","created_at":"2017-05-24 16:02:21","updated_at":"2017-05-25 13:38:38","deleted_at":null,"pivot":{"favoritable_id":3,"user_id":1}}]}"></fav-btn>
Related
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.
I'm trying to create a watcher to bind the value from an input run it through a method and display that value on the page. Its a fairly straightforward sample of code I'm working with but I believe I have a scoping issue but I don't see anything wrong.
I tried changing a few things such as the convertTitle function scoping. e.g. But I got the same error
convertTitle() {
return Slug(this.title)
}
My Vue Component -
<template>
<div class="slug-widget">
<span class="root-url">{{url}}</span>
<span class="slug" v-if="slug !== nil">{{slug}}</span>
</div>
</template>
<script>
export default {
props: {
url: {
type: String,
required: true
},
title: {
type: String,
required: true
}
},
data: function() {
return {
slug: this.convertTitle()
}
},
methods: {
convertTitle: function() {
return Slug(this.title)
}
},
watch: {
title: function(val) {
this.slug = this.convertTitle();
}
}
}
</script>
My Blade Partial with input -
#extends('admin.admin')
#section('content')
<div class="row">
<div class="col-md-9">
<div class="row">
<h1>Create new page</h1>
</div>
<div class="row">
<div class="pcard">
<form action="" method="POST" class="">
{{ csrf_field() }}
<label>Title</label>
<input type="text" name="page-title" placeholder="" v-model="title">
<slug-widget url="{{url('/')}}" :title="title"></slug-widget>
</form>
</div>
</div>
</div>
</div>
#endsection
#section('scripts')
<script>
var app = new Vue({
el: '#app',
data: {
title: ''
}
});
</script>
#endsection
Full error Trace -
[Vue warn]: Property or method "title" 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. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>)
Updated with compute -
export default {
props: {
url: {
type: String,
required: true
},
title: {
type: String,
required: true
}
},
computed: {
slug() {
return Slug(this.title)
}
}
}
The error was resolved by removing the following snippet from app.js
const app = new Vue({
el: '#app'
});
You shouldn't have, and shouldn't ever need, a function call to supply the value of something in your data.
It sounds like you just need to put convertTitle() into a computed and away you go?
I'm having this error with my vue script, this are the files i'm using
Can't find the error reported with the axios.ad (favoriteAd.vue).
It's basically a favourite feature using:
https://scotch.io/tutorials/implement-a-favoriting-feature-using-laravel-and-vue-js#comments-section
(replacing post with ad)
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('favorite', require('./components/FavoriteAd.vue'));
const app = new Vue({
el: '#favorite'
});
favoriteAd.vue
<template>
<span>
<a href="#" v-if="isFavorited" #click.prevent="unFavorite(ad)">
<i class="fa fa-heart"></i>
</a>
<a href="#" v-else #click.prevent="favorite(ad)">
<i class="fa fa-heart-o"></i>
</a>
</span>
</template>
<script>
export default {
props: ['ad', 'favorited'],
data: function() {
return {
isFavorited: '',
}
},
mounted() {
this.isFavorited = this.isFavorite ? true : false;
},
computed: {
isFavorite() {
return this.favorited;
},
},
methods: {
favorite(ad) {
console.log(ad);
axios.ad('/favorite/'+ad) // this is the error line
.then(response => this.isFavorited = true)
.catch(response => console.log(response.data));
},
unFavorite(ad) {
axios.ad('/unfavorite/'+ad)
.then(response => this.isFavorited = false)
.catch(response => console.log(response.data));
}
}
}
view
#if (Auth::check())
<favorite
:ad={{ $aviso->id }}
:favorited={{ $aviso->favorited() ? 'true' : 'false' }}
></favorite>
#endif
You never included axios in your app. Try npm install axios then require('./axios') on the app.js file. Also, according to the axios reference manual, there's no method named ad.
I have a Vue component that makes a post request, and then outputs the returned html.
Sometimes, the html that is returned by the post contains Vue directives.
Is there a way to have Vue parse the returned html before it is output?
(In the longer term, I will rewrite this as a pure Vue solution, with the post request returning data rather than html. I'm after a short term solution if its possible).
EDIT:
Here's my stab based on thanksd's suggestion but I'm not sure how to bind the new Vue instance to an html element.
<template>
<div>
<input type="text" class="form-control" v-model="value" #change="getResults" ></input>
<div>
<template v-bind="results"></template>
</div>
</div>
</template>
<script>
import{eventHub} from '../utils/event.js'
export default {
data : function(){
return {
value : '',
results : {}
}
},
methods:{
getResults(){
if(this.value.length < 3){return;}
this.$http.post('/ajax/search',{search:this.value}).then((response)=>{
this.results = Vue({template:response.body});
});
},
},
}
After the post request returns you could create a new Vue instance, passing the html as the template and binding it to an element in your current Vue instance's template:
<template>
<div>
<input type="text" class="form-control" v-model="value" #change="getResults" ></input>
<div>
<div id="results"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return { value: '' }
},
methods: {
getResults() {
if (this.value.length < 3) {
return;
}
this.$http.post('/ajax/search', { search: this.value }).then((response) => {
new Vue({ el: '#results', template: response.body });
});
}
}
}
</script>
Or as #Bert pointed out, you could add a <component> tag to your template and pass its definition via the is prop:
<template>
<div>
<input type="text" class="form-control" v-model="value" #change="getResults" ></input>
<component :is="results"/>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
results: null
}
},
methods: {
getResults() {
if (this.value.length < 3) {
return;
}
this.$http.post('/ajax/search', { search: this.value }).then((response) => {
this.results = { template: response.body };
});
}
}
}
</script>
I'm having trouble accessing data in Vue component I use prop to pass my data from view to component like this. I'm using Laravel.
<fav-btn v-bind:store="{{ $store }}"></fav-btn>
And my component looks like this:
<template>
<a href="#" class="btn-link text-danger" v-on:click="favorite">
<i v-bind:class="{ 'fa fa-heart fa-2x': isFavorited == true, 'fa fa-heart-o fa-2x': isFavorited == false }" class="" aria-hidden="true"></i>
</a>
</template>
<script>
export default {
props: ['store'],
data(){
return{
isFavorited: this.store.favoritable.isFavorited,
}
},
methods: {
favorite: function () {
this.AjaxRequest();
this.ToggleFav();
},
ToggleFav: function () {
this.isFavorited = !(this.isFavorited);
},
AjaxRequest: function () {
if (this.isFavorited)
{
axios.delete('stores/' + this.store.favoritable_id);
}
else {
axios.post('stores/' + this.store.favoritable_id);
}
}
}
}
</script>
In Vue devtools I can see all the objects in props but I can't access them the isFavorited always stays false. Am I accessing the objects attributes incorrectly?
You are doing it wrong. You shouldn't diractly mutate a value which is in store. You should write a mutator in the store file and change value by that. Here is the docs.
https://vuex.vuejs.org/en/mutations.html