Estoy un poco confundido acerca de cómo pasar un valor definido dentro de un botón a un componente secundario. Básicamente, el valor de un botón en el que se hizo clic y que muestra un porcentaje debe ser el valor de prop. Este valor de prop debe cambiar según el valor en el que haga clic. ¿Debo usar un v-model ? ¿Si es así, cómo? Esto es lo que tengo hasta ahora...
ButtonGroup.vue
<button class="button" v-on:click="percentageValue(0.05)">5%</button> <button class="button" v-on:click="percentageValue(.10)">10%</button> <button class="button" v-on:click="percentageValue(.15)">15%</button> <button class="button" v-on:click="percentageValue(.25)">25%</button> <button class="button" v-on:click="percentageValue(.50)">50%</button> <script> export default { name: 'ButtonGroup', data(){ return{ percentage: null } }, methods:{ percentageValue(value){ return this.percentage = value; } }, props:['percentage'] } </script>Calculadora.vue
<ButtonGroup :percentage="percentage"/>Prueba así:
Vue.component('button-group', { template: ` <div class=""> <ul> <li v-for="(percent, i) in percentages" :key="i"> <button class="button" @click="setPercent(percent)" :class="selPercent === percent && 'selected'"> {{ percent }}% </button> </li> </ul> </div> `, props:['percentage'], data(){ return{ selPercent: this.percentage, percentages: [5, 10, 15, 25, 50 ] } }, methods:{ setPercent(value){ this.selPercent = value; this.$emit('percent-seted', value); } }, }) new Vue({ el: '#demo', data() { return { percent: 5 } }, methods: { percentSeted(val) { this.percent = val } } }) Vue.config.productionTip = false Vue.config.devtools = false ul { list-style: none; display: flex; } .selected { background: violet; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <h3>{{ percent }}%</h3> <button-group :percetntage="percent" @percent-seted="percentSeted" /> </div>