I started learning vuejs and wanted to make a simple "like" project using components in vue. I made two button (like and dislike) that every one has separate counter. Until now everything was OK. Now, I want show sum of these counters in under. for this I need these 2 variables next to each other outside the component so I try to bind their values with external variables.But external variables didn't change! and also said in the console:
[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: "lval" found in --->
See my Code:
Vue.component('like',{
template: '#like' ,
props: ['lval','lname','lstep','lclass'],
methods:{
changeCounter : function(step){
this.lval += parseInt(step);
}
}
});
new Vue({
el: '#app',
data:{
counterlike: 0,
counterdislike: 0
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<like lname="Like" lstep="1" :lval="counterlike" lclass="btn-success"></like>
<like lname="Dislike" lstep="-1" :lval="counterdislike" lclass="btn-danger"></like>
<br>
{{ counterlike + counterdislike }}
</div>
<template id="like">
<button :class="['btn',lclass]" @click="changeCounter(lstep)" >{{ lname + ' ' + lval }}</button>
</template>