This is my laravel:
$user->load('company', 'status', 'role');
return responseData($user);
This is my vue2 code:
axios.get(`http://localhost:81/admin/users/get/${this.$route.params.id}`)
.then(response => {
this.user = response.data
});
And v-model:
<input type="text" placeholder="Company" v-model="user.company.name">
It still render company.name but get warning:
[Vue warn]: Error in render: "TypeError: Cannot read properties of
undefined (reading 'name')"
As Estus Flask suggests,
The moment your component is mounted, you didn't receive the data yet.
Try to use a v-if directive on the input itself using optional chaining like this :
<input v-if="user?.company?.name" type="text" placeholder="Company" v-model="user.company.name">
It will check if user exists, then if company exists, then if name exists. If any doesn't exist it will not render the element.
Related
Getting the Error Cannot read properties of undefined (reading '$refs') though I'm having a reference in the template. Does it mean I must use Vue mounted hook ?
<div class="input-wrapper">
<input type="text" id="phone" placeholder="(555) 555-5555" ref="input"/>
</div>
<script>
this.$refs.input.addEventListener('input', function () {
// some code
});
</script>
Inside root of <script> of a Vue component, in both Vue 2 and Vue 3, this is undefined:
<script>
console.log(this) // undefined
</script>
See it here.
Vue template refs can only be accessed inside any hook or method happening after the component has been mounted and before it is unmounted.
Which means the earliest you can reference this.$refs is inside mounted. And the latest is in beforeUnmount. And you can also access them in any hook or method happening between those two moments.
Considering you're attempting to add an event listener to a HTMLInputElement, I'd recommend using the v-on directive, which automatically adds the event listener on mount and removes it on unmount.
In your case:
<template>
<div class="input-wrapper">
<input
type="text"
id="phone"
placeholder="(555) 555-5555"
#input="myFn" />
</div>
</template>
<script>
export default {
methods: {
myFn(event) {
console.log(event)
}
}
}
</script>
As a side note, you should know that a regular function's this doesn't have access to the component context, unless it's an arrow function:
export default {
mounted() {
this.$refs.input.addEventListener('input', function() {
/*
* Here `this` is the context of the current function, you can't
* access methods, computed, data or props of the component.
* You'd need to make it an arrow function to access the component scope
*/
})
}
}
Whereas in any method (e.g: the above myFn), this is the component context, which has access to all component members.
I am trying to understand what is going on here.
I am using axios to get data from my database into my vue application.
The data appears when I inspect the page
I am able to display ALL the data on the page by using the following code.
<template>
<div v-for="property in propertyInfo">
<p>{{ property }}</p>
</div>
</template>
export default {
data: () => ({
propertyInfo: [],
methods: {
getInfo(){
axios.get(`bi/stats/property/company`, {timeout: 300000})
.then(response => this.propertyInfo = response.data)
.catch(error => this.propertyInfo = error.data);
},
},
created() {
this.getInfo()
},
}
But I only want to display specific data. For example I only want to display currentNumberEmptyUnits, but when I try to call for that specifically I get an error messages.
What I tried:
<div v-for="property in propertyInfo">
<p>{{ property.currentNumberEmptyUnits }}</p>
</div>
ERROR: "TypeError: Cannot read properties of null (reading 'currentNumberEmptyUnits')"
<div v-for="property in propertyInfo">
<p>{{ property.bIGraphStats.currentNumberEmptyUnits }}</p>
</div>
ERROR: "TypeError: Cannot read properties of null (reading 'currentNumberEmptyUnits')"
I don't understand why I am getting this error. propertyInfo is an array, not null, and currentNumberEmptyUnits is not null either, and if run the code without trying to ask for a specific value, then it can show all the data just fine.
How do I get it to show only that specific value without getting the error message?
I think the main problem is that you use v-for for propertyInfo and propertyInfo is the object bIGraphStats. To access property currentNumberEmptyUnits need change template to
<div>
<p>{{ propertyInfo.currentNumberEmptyUnits }}</p>
</div>
v-for - need use for arrays
I am new to Vuejs & trying to use vue-quill-editor. Here I am trying to Use Quill editor Component in other components.
WysiwygInput.vue
<quill-editor
:options="{
placeholder: placeholder,
}"
:content="content"
v-on:change="$emit('change', $event.target.content)"
></quill-editor>
App.vue
<wysiwyg-input v-model="content" placeholder="Post Content" />
This is showing the following error in the console.
[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'content' of undefined"
I know this is something basic but can't solve this.
CodeSandbox link
You should add an arrow function as handler with $event as parameter and emit the text property as $emit payload :
v-on:change="($event)=>$emit('change', $event.text)"
I am trying to make a little component editor and try to render it real time. I have problems with handling Vue.compile and render errors.
Here is the component editor (https://jsfiddle.net/gecjfk1w/5/):
<div id="app">
<textarea v-model="some_text" cols="30" rows="10"></textarea>
<div>
The rendered component:
<component :is="component"></component>
</div>
</div>
const ComponentFactory = (template) => {
return {
template
}
}
new Vue({
el: "#app",
data: {
some_text: `<div>Hello World</div>`
},
computed: {
component () {
return ComponentFactory(this.some_text)
}
}
})
Try to update the textarea with <div>Hello World {{ hello }}</div>
You will see in the console the following error:
[Vue warn]: Property or method "hello" is not defined on the instance but referenced during render
This is normal behavior but I'd like to display something when this error appears.
Like: "An error have been detected: {{ error }}"
I have tried the renderError function on the ComponentFactory and the errorCaptured hook on the parent element (https://jsfiddle.net/gecjfk1w/5/) with no success.
However, the renderError and errorCaptured methods work well when the error is not a compile error:
Example: <div>Hello World {{ hello.f }}</div> throws a "TypeError: Cannot read property 'f' of undefined" and activates renderError and errorCaptured.
However, I'm not even sure that renderError should be used because the documentation says that it is not available in production mode.
How could I catch compile and render errors? It would be like a try/catch on the template level
I created a simple Vue 2 component:
Vue.component('upper', {
props: ['value'],
template: '#upper-template',
computed: {
formattedValue: function() {
return this.value.toUpperCase();
}
}
});
Here is the template:
<template id="upper-template">
<span>{{ formattedValue }}</span>
</template>
And when I use it:
<upper value="test"></upper>
it works fine, but I am getting the following warning:
[Vue warn]: Property or method "formattedValue" is not defined on the
instance but referenced during render. Make sure to declare reactive
data properties in the data option. (found in root instance)
Can you tell me what is wrong with my code and how can I fix this? I read the documentation, but I could not understand what I am doing wrong.
My <template id="upper-template"> was in new Vue({el: '#app', ... ) (it was placed inside <div id="app">), and that's why I was getting that warning.