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
Related
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
<template>
<div class="test">
<h1>か</h1>
<input type="text" v-model="userIn" v-on:keyup.enter="enterHit" id="tboxInput">
<button v-on:click="enterHit()">Next</button>
</div>
</template>
<script>
export default {
name: 'test',
data() {
return {
title: 'Hello World',
userIn: "",
user: {
firstName: 'Taco',
lastName: 'Bell'
}
}
},
methods: {
enterHit: function(){
//validate
console.log("test");
}
}
}
</script>
<style scoped>
</style>
New to Vue.js. Testing out v-on:keyup.enter functionality. Console in Firefox giving me an error:
[Vue warn]: Property or method "enterHit" 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.
TypeError: _vm.enterHit is not a function
Test.vue component is being imported into my main App.vue, for reference.
Turns out the browser needed to be refreshed manually after I made those method additions. I was relying on the dev server (npm run dev) to update the page.
This is a simple component. I'm trying to assign props to data as docs said so. (the initialData comes from vuex and database)
<template>
<section>
{{ initialData }}
{{ privateData }}
</section>
</template>
<script>
export default {
name: 'someName',
props: [
'initialData'
],
data() {
return {
privateData: this.initialData
};
}
};
But, the problem is initialData is OK, but privateData is just an empty object {}.
Weirdest thing is, if I save my file again, so webpack hot reloads stuff, privateData also gets the proper data I need.
Here is the parent:
<template>
<section v-if="initialData">
<child :initial-data="initialData"></micro-movies>
</section>
</template>
<script>
export default {
name: 'parentName',
data() {
return {};
},
computed: {
initialData() {
return this.$store.state.initialData;
}
},
components: {
child
}
};
</script>
I know that it's about getting data dynamically . because if I change initialData in parent to some object manually, it works fine.
The data function is only ever called once at component creation. If initialData is not populated at that point in time, then privateData will always be null. That is why you probably want to use a computed property, or watch the property.
I'm trying to access this.$el.offsetTop in a computed property, but get the error:
Cannot read property 'offsetTop' of undefined
How can I access the offsetTop of the component in a computed method? if this is not possible then is there an alternative?
Component:
<template>
<div :class="{ 'active' : test }"></div>
</template>
<script>
export default {
computed: {
test() {
console.log(this.$el.offsetTop);
}
}
}
</script>
If a computed property is used in the template, its method will fire before the Vue instance is mounted, so this.$el will be undefined.
If your computed property is dependant on some property of this.$el, you can set it to a data property in the mounted hook (where this.$el will be defined).
In your case:
<template>
<div :class="{ 'active' : test }"></div>
</template>
<script>
export default {
data() {
return { offsetTop: null };
},
computed: {
test() {
console.log(this.offsetTop);
}
},
mounted() {
this.offsetTop = this.$el.offsetTop;
}
}
</script>
Here's what I did to solve this problem:
I set an el property to null in the component's data, and in the mounted hook, I set this.el to this.$el. Then, in the computed property, I check this.el before trying to access its properties to avoid an error during the first render. So, in the context of your example we'd have:
<template>
<div :class="{ 'active' : test }">{{test}}</div>
</template>
<script>
export default {
data: {
el: null,
},
computed: {
test() {
return this.el ? this.el.offsetTop : 0;
}
},
mounted(){
this.el = this.$el;
}
}
</script>
As a side note, I don't believe you have access to the console in Vue.js computed properties, so I removed that bit.
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.