I am using vue js as my frontend framework and I have defined a #click event on a button. However, when I click it, I am getting following error:-
[Vue warn]: Property or method "getArea" 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.
[Vue warn]: Invalid handler for event "click": got undefined
found in
---> <ElButton> at packages/button/src/button.vue
<ElCard> at packages/card/src/main.vue
<ElCol>
<ElRow>
<ElCol>
<ElRow>
<ElHeader> at packages/header/src/main.vue
<ElContainer> at packages/container/src/main.vue
<ProgressBar> at src/views/Map/components/ProgressBar.vue
I found a similar question at the following link:-
VueJS - Invalid handler for event "click": got undefined
but does not seem to solve the problem
ProgressBar.vue
<template>
<el-col class="progress-bar-icon" :span="6">
<span class="step-text">Step-2<br/></span>
<el-button id="two" class="icon" icon="el-icon-location-outline" circle></el-button>
<el-card v-if="ifLocation" class="dialog-box-card">
<h4 class="heading">Pin Down Your Roof On The Map</h4>
<el-button type="primary" round #click="getArea">Next <i class="el-icon-arrow-right"></i>
</el-button>
</el-card>
</el-col>
</template>
<script>
export default {
name:'progress-bar',
data(){
return {
ifLocation:true,
ifArea:false,
}
},
method:{
getArea(){
this.ifLocation=false
this.ifArea=true
}
}
};
</script>
index.vue
<template>
<div>
<progress-bar></progress-bar>
</div>
</template>
<script>
import ProgressBar from './components/ProgressBar';
export default {
name:'index',
components:{
'progress-bar':ProgressBar,
},
};
</script>
Please change "method" to "methods"
like this :
methods:{
getArea(){
this.ifLocation=false
this.ifArea=true
}
}
I finally found it. An error occurs because we call a function not found in methods. For example; we use the "increase" function in a div, but we don't define this function in methods. When we add this function to methods, the problem disappears.
Related
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 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 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
// Component.vue with computed property - Does not work
<template>
<section class="background" v-bind:style="{
'background-image': 'url(' + require(imageUrl) + ')'}"> .
</section>
</template>
<script>
export default {
computed: {
imageUrl() {
return './path/to/image';
}
}
}
</script>
// Component.vue - Direct approach works
<template>
<section class="background" v-bind:style="{
'background-image': 'url(' + require('./path/to/image.jpg') + ')'}"> .
</section>
</template>
The reason for the former implementation is that I need a computed property which could be generated random every time there is a reload.
Here is the full error message for computed property case
[Vue warn]: Error in render: "Error: Cannot find module '../assets/media/images/1.jpg'"
found in
---> <Background>
<App> at src/App.vue
<Root>
warn # vue.runtime.esm.js?2b0e:587
logError # vue.runtime.esm.js?2b0e:1733
globalHandleError # vue.runtime.esm.js?2b0e:1728
<stack trace> // I can not post the full message since it is not allowable by the policy of stackoverflow
Please change code as below.
computed: {
imageUrl() {
return require('./path/to/image');
}
}
sorry I'm not familiar with this behavior, but as far as I searched, your problem might relates what the following page of Vue Loader says.
Asset URL Handling | Vue Loader
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.