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.
Related
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.
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
I know this has been asked before but nothing seems to match my problem. I can't figure out what is going on.
Error
[Vue warn]: Error in render: "TypeError: Cannot read property 'shipperid' of undefined"
I'm retrieving the data from an API as a state (vuex) not local data.
<template>
<div>Hello
<div>{{allBatches[0].shipperid}}</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
name: "batching",
components: {},
props: {},
data: function() {
return {};
},
computed: {
...mapGetters(["allBatches"])
},
methods: {
...mapActions(["fetchBatches"])
},
created() {
this.fetchBatches();
}
};
</script>
The data is coming, but the error is bugging me.
Also, if I edit it, this error happens. I kind of understand what they want me to do, but I don't think I know how. The defaultvalue is coming from the reusable component. (All added to the sandbox) I'd appreciate any help
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: "defaultvalue"
Here is a minimal copy of my system in a sandbox
You will need to add v-if condition in your template due to fact that when your component is created/mounted, you will not have any detail in vuex's allBatches getters if the API is still running in background.
So modify your template with,
<div>Hello
<div v-if="allBatches">{{allBatches[0].shipperid}}</div>
</div>
whenever the API call will complete, allBatches will be changed & due to reactivity it will re-render the html with changes of allBatches.
I am working with my new project with Vue.js and such an error has been showed to me:
[Vue warn]: Property or method "myImage" 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.
Here is the code:
<template>
<div class="selectedPlayer"><div class="avatar" v-bind:style="myImage"></div>
<div class="playerName">{{ playerName }}</div>
</div>
</template>
<script>
export default {
name: 'messageForPlayer',
props: [ "playerId", "playerName" ],
data () {
return {
// myImage: "background-image: url(/src/img/uploads/101.jpg)",
}
},
computed: {
myImage: function () {
return {
'background-image': "url(/src/img/uploads/101.jpg)"
}
}
}}
</script>
As you can see there is computed property called "myImage" with hardcoded value (just for tests, normally it will come from props) but it causes an error. If i unhash "myImage" in data - it works all good, but this value myst by dynamic.
What am i doing wrong?
Kalreg
I have a Vue component which has a custom render method. The method is not getting called however.
<template>
<div class="guide"></div>
</template>
<script>
export default {
name: 'guide',
render: function(createElement){
return createElement('div', 'this will never get called?'),
},
};
</script>
I've looked through the documentation on single file components but it makes no reference to any caveats regarding render(). Is there another way to call this method?
As ABDEL-RHMAN suggested, removing the template will cause the code to work; the <template> causes the render method to be ignored. Working example:
<script>
export default {
name: 'guide',
render: function(createElement){
return createElement('div', 'this will get called?'),
},
};
</script>