Using methods inside computed properties in vueJs
I am facing a problem where I need to call a function inside my computed property. even my situation is much more complicated, but even so it doesn't work even in a simpler situation.
var vm = new Vue({
el: '#vue-instance',
data: {
x: 1
},
methods:{
augmented: function(variable) {
return(2*variable)
}
,
computed: {
doubleX: function() {
return augmented(this.x)
}
}
});
<div id="vue-instance">
<input type="number" v-model="x"> result: {{ doubleX }}
</div>
As you will see vueJs not showing enter image description here
+3
source to share
1 answer
You need to access your component methods via this
:
var vm = new Vue({
el: '#vue-instance',
data: {
x: 1
},
methods: {
augmented: function(variable) {
return (2 * variable);
},
},
computed: {
doubleX: function() {
return this.augmented(this.x);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="vue-instance">
<input type="number" v-model="x"> result: {{ doubleX }}
</div>
+5
source to share