I have a weird occurrence where vue claims a property is undefined on the instance when it really is defined. I have made a minimal version of the component that still displays this weird behaviour. This is my component:
<template>
<div>
<h1>{{ formtitle }}</h1>
</div>
</template>
<script>
export default {
name: 'RequestPasswordChange',
data () {
return {
formtitle: 'blabla'
}
}
}
</template>
When viewed in the browser, vue throws the familiar error:
Property or method "formtitle" is not defined on the instance but referenced during render, but as can bee seen, the property is defined in the data function. What other conditions could trigger this error?
You have </template> instead of </script> as the final closing tag.
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.
Please see this minium example
1
This minimum template won't throw any error since the parent is not rendering anything.
<template>
<div v-if="false">
{{ i.dont.have.the.value }}
</div>
</template>
2
Now if I create a Modal wrapper with default slot, and still using v-if
Modal.vue
<template>
<div v-if="show">
<slot />
</div>
</template>
<script>
export default {
props: {
show: Boolean,
},
};
</script>
However, this will throw Error, Why?
App.vue
<template>
<Modal :show="false">
<div>{{ i.dont.have.the.value }}</div>
</Modal>
</template>
<script>
import Modal from "#/components/Modal.vue";
export default {
components: {
Modal,
},
};
</script>
[Vue warn]: Error in render: "TypeError: Cannot read property 'dont' of undefined"
Why is this happening?
How can I create a Modal with guarantee children won't be excuted if not show?
I can't directly use v-if in the Modal component because I need a transition.
You made a mistake about the slot in App.vue because VueJS will try to resolve your i.dont.have.the.value variable based on parent scope (your slot is not conditioned)
Remember this rule from official documentation
Everything in the parent template is compiled in parent scope; everything in the child template is compiled in the child scope.
https://v2.vuejs.org/v2/guide/components-slots.html#Compilation-Scope
Just define the variable in the right scope and you will be fine (if you define it in child component and want to expose it to parent, use a scoped slot then).
I have a component
In the component I have
export default {
name: "Modal",
props: ['showFooter'],
}
Then in the template i have
<template>
<div class='modal'>
<div class='footer' v-if='showFooter'>This is the footer</div>
</div>
</template>
THe footer doesnt display at all, if i pass the prop or not. It just says
[Vue warn]: Property or method "showFooter" is not defined on the instance but referenced during render.
Whats the issue here??
Ive also just tried
<template>
<div class='modal'>
<div class='footer' v-if='showFoot'>This is the footer</div>
</div>
</template>
export default {
name: "Modal",
props: ['showFooter'],
data(){
return {
showFoot:this.showFooter
}
}
}
Then I get told showFoot isnt defined. Which is even wierder because Im defining it right there in the data!??
Even if I just remove the property totally, and just define it in data
export default {
name: "Modal",
data(){
return {
showFoot:true
}
}
}
I still get
[Vue warn]: Property or method "showFoot" is not defined on the instance but referenced during render.
So wierd and I cant for the life of me figure it out
Its almost like the template has no access to anything I define in the data() or props of the componenet. Never seen this before
i think so you are not passing props from parent component. Ideally you can pass it from parent component and receive it in Children.
<childComponent :yourPropNameInChild="anyDataFromParentYouWantToPass" />
here this ChildComponent is rendered in your parent component.
to receive it in children you can do
export default {
name: "Modal",
props: ['yourPropNameInChild'],
}
as of for your example
<modal :showFooter="showFooter" />
in your parent you have to write above line of code
and in your child you have to receive it as you are doing
also in your example you were missing script tag
So I've been investigating how mutating child props from the parent can be done.
I already encountered the pitfall with using v-model.
It throws this error:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "number1"
I learnt to deal with this problem by emitting events from the child and using .sync modifier in the parent.
However, I still feel like I didnt really understand whats going on under the hood in both cases.
As far as I understood, when mutating the childs properties from parent with v-model, the mutated data also mutates for any other parent importing the child.
To test this out, I built the following setup:
I have a child component with two inputs:
One using v-model, the other an emitted event to mutate the childs props.
We call it "compA":
<template>
<div>
<input
:value="number1"
#change="$emit('update:number1', $event.target.value)"
placeholder="number1emittedEvent"
/>
<input v-model="number1" placeholder="number1vmodel">
</div>
</template>
<script>
export default{
name: "compA",
props: {
number1: String
}
}
</script>
compA is being imported by compZ and compB. compZ also imports compB, and then compZ is finally being imported by myComplexView5.vue (my project uses routing).
compB:
<template>
<div>
<h1>compB containing compA</h1>
<compA/>
<p v-text="number1"></p>
</div>
</template>
<script>
import compA from "#/components/complexComponent5/compA.vue"
export default {
name: "compB",
components: {
compA
},
data(){
return {
number1:''
}
}
}
</script>
compZ:
<template>
<div>
<compA :number1.sync="number1"/>
<br>
<compB />
</div>
</template>
<script>
import compA from "#/components/complexComponent5/compA.vue"
import compB from "#/components/complexComponent5/compB.vue"
export default {
name: "compZ",
components: {
"compA" : compA,
"compB" : compB
},
data(){
return {
number1:''
}
}
}
</script>
myComplexView5.vue:
<template>
<div>
<h1>And More testing</h1>
<compZ />
</div>
</template>
<script>
import compZ from "#/components/complexComponent5/compZ.vue"
export default{
name: "myComplexView5",
components: {
compZ
}
}
</script>
Now, I expected the following behavior:
When inputting into the inputfield which has v-model, I'd expect the paragraph inside compB to display the changes, since its text value is bound to the number1 prop from child compA. Since I mutated the childs props directly, the changed value should show up in any of the childs parents (or grandparents and so on).
But it doesnt. And it gets even better: When I use the inputfield with the event emitting from child to parent, the paragraph inside compB receives the changes!
This is basically the opposite of what I've learned from the sync modifier docs:
In some cases, we may need “two-way binding” for a prop. Unfortunately, true two-way binding can create maintenance issues, because child components can mutate the parent without the source of that mutation being obvious in both the parent and the child.
That’s why instead, we recommend emitting events in the pattern of update:myPropName. For example, in a hypothetical component with a title prop, we could communicate the intent of assigning a new value with:
this.$emit('update:title', newTitle)
Then the parent can listen to that event and update a local data property, if it wants to
Maybe this is caused by the data() inside compB which sets number1 to EMPTYSTRING when the component rerenders? I don't know, I'm very new to vue and I don't really understand when components rerender. I also used this
data() {
return {
number1: ''
}
}
inside compB To prevent this error from occuring:
[Vue warn]: Property or method is not defined on the instance but referenced during render.
I don't really know how else to prevent this error from occuring, since it seems that even though compB imported the prop from compA, the prop still needs to be declared in compB Oo
EDIT:
I just found out that in the code I'm using, compZ still had this paragraph element:
<p v-text="number1"></p>
The string inputted into the inputfield appeared there, NOT in the paragraph element of compB. For some reason, even though I get no errors, neither through the emitted event from compA, nor through the v-model from compA does any change to the props inside compA show any impact inside compB... :(
I put your example code in a snippet at the bottom of the post so that we're on the same page about what code is actually being talked about (I removed the line with the <p v-text="number1"></p> from compB, because that component doesn't have a prop or data/computed property for number1).
Your compA component takes in a number1 prop, which it then uses for two inputs:
The first input uses the prop as its value and then emits an 'update:number1' event with the input's value in response to the input's change event. This allows you to specify the .sync modifier when the parent component binds a value to the compA component's number1 prop (as you do in compZ).
The second input directly binds the value of the number1 prop via v-model. This is not recommended (for reasons I'll explain), which is why you are seeing the "Avoid mutating a prop directly" warning. The effect of directly binding the number1 prop to this input is that whenever the value of this second input changes, the value of number1 will change, thus changing the value of the first input, and finally causing that first input to emit the update:number1 event. Technically Vue allows you to do this, but you can see how it can get confusing.
Your compB component simply renders some texts and a compA component without passing a value as a number1 prop to compA.
Your compZ component renders a compA component, binding its own number1 property value with the .sync modifier to the compA component. This compA component instance does not share any data with the compA component instance in the compB component, so we can't expect any changes to either component to affect the other.
Vue.component('compA', {
template: `
<div>
<input
:value="number1"
#change="$emit('update:number1', $event.target.value)"
placeholder="number1emittedEvent"
/>
<input v-model="number1" placeholder="number1vmodel">
</div>
`,
props: {
number1: String
}
})
Vue.component('compB', {
template: `
<div>
<h1>testString</h1>
<compA />
</div>
`
})
Vue.component('compZ', {
template: `
<div>
<compA :number1.sync="number1"/>
<br>
<compB />
</div>
`,
data() {
return {
number1: ''
}
}
})
new Vue({
el: '#app'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<h1>And More testing</h1>
<comp-z/>
</div>
</div>
I have a component that takes a main <slot> from a form that is generated elsewhere in my application. I'm trying to use v-model on the form inputs but my vue component just spits out a warning about the properties not being defined, when in fact they are.
I admit it's a weird way of doing things, but it seems to be the easiest way for me to do this since my form is being generated by Symfony.
html:
<my-component>
<input ref="start" v-model="start"/>
</my-component>
my component:
<script>
export default {
data() {
start: null
},
mounted() {
console.log(this.$refs) // === {}; expected {"start":{...}}
}
}
</script>
<template>
<div>
<slot/>
... other stuff here
</div>
</template>
console log:
Property or method "start" is not defined on the instance but referenced during render
I cannot use $refs or v-model in the html. Am I doing something wrong? Or is this just not possible.
If you declare v-model="start" in the parent then it belongs to the parent and needs to be declared there. It looks like instead you declare it in the component instead as null.
If you reorder things it should work as you expect:
Parent:
<parent>
<input v-model="start" :start="start"/>
</parent>
<script>
export default {
data() {
start: null // Important to define start here if it's used in this component's html
}
}
</script>
Component:
<template>
<div>
<slot/>
... other stuff here
</div>
</template>
<script>
export default {
props: ['start'], // Receive the prop from the parent
data() {
},
mounted () {
console.log(this.start) // Should echo the value of the prop from the parent
}
}
</script>