Sending Data from Clicked Button to Another Component as a Prop

Question

Sending Data from Clicked Button to Another Component as a Prop

I am struggling to figure out how to pass a value that is set inside a button to a child component. Essentially, I want the value of the clicked button that displays a percentage to be passed as a prop value. This prop value should update depending on which button I click. Do I need to utilize a v-model? If so, how can I achieve this? Below is my current progress...

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){
         this.percentage = value;
      }
    },
    props:['percentage']
  }
</script>

Calculator.vue

<ButtonGroup :percentage="percentage"/>

javascript vue.js vue-component vuejs3

Answer 1

Answer №1

Here is an alternative solution:

Vue.component('option-group', {
  template: `
  <div class="options">
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <button class="btn" 
                @click="selectItem(item)"
                :class="selectedItem === item && 'active'">
          {{ item }}
        </button>
      </li>
    </ul>
  </div>
  `,
  props:['list'],
  data(){
    return{
      selectedItem:  this.list[0],
      items: [5, 10, 15, 25, 50 ]
    }
  },
  methods:{
    selectItem(val){
      this.selectedItem = val;
      this.$emit('item-selected', val);
    }
  },
})

new Vue({
  el: '#example',
  data() {
    return {
      selectedOption: 5
    }
  },
  methods: {
    itemSelected(value) {
      this.selectedOption = value
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

ul {
  list-style: none;
  display: flex;
}
.active {
  background: lightblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="example">
  <h3>{{ selectedOption }}%</h3>
  <option-group :list="selectedOption" @item-selected="itemSelected" />
</div>

Answer 2

Here is an alternative solution:

Vue.component('option-group', {
  template: `
  <div class="options">
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <button class="btn" 
                @click="selectItem(item)"
                :class="selectedItem === item && 'active'">
          {{ item }}
        </button>
      </li>
    </ul>
  </div>
  `,
  props:['list'],
  data(){
    return{
      selectedItem:  this.list[0],
      items: [5, 10, 15, 25, 50 ]
    }
  },
  methods:{
    selectItem(val){
      this.selectedItem = val;
      this.$emit('item-selected', val);
    }
  },
})

new Vue({
  el: '#example',
  data() {
    return {
      selectedOption: 5
    }
  },
  methods: {
    itemSelected(value) {
      this.selectedOption = value
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

ul {
  list-style: none;
  display: flex;
}
.active {
  background: lightblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="example">
  <h3>{{ selectedOption }}%</h3>
  <option-group :list="selectedOption" @item-selected="itemSelected" />
</div>

Sending Data from Clicked Button to Another Component as a Prop

Answer №1

Similar questions

Issue with Material-ui IconButton's edge properties not functioning as expected

Bidirectional data binding in AngularJS for <option> elements generated from an AJAX request

My preference is for the most straightforward ajax form application available

Using jQuery to show text upon hover using a `for` loop

Trouble with ScrollView not scrolling on Nativescript-Vue

I'm puzzled as to why this code snippet consistently produces a range of 50 to 100 repeated values. This piece of code is crucial for altering the behavior of a function based on a specific

Leveraging JSON for parsing xmlhttp.responseText to auto-fill input fields

Utilizing Vue JS to set an active state in conjunction with a for loop

Data Binding in AngularJS appears to be non-functional

Interacting with PHP through JavaScript function calls

Creating users or custom roles in MongoDB on a NodeJS server is not currently possible

Is it possible for jQuery UI Tabs to load entire new HTML pages?

Incorporating real-time meta tags retrieved from an API into a static Nuxt.js website

When attempting to run `npm install`, an error message is received indicating a network connectivity issue: "npm ERR

How can Angular JS detect the names of the CSS files being used in an HTML page?

Ensure that a Vue component is able to verify whether a Vuex store state property contains any existing data

Iterate through the form fields and save the information into an object

Tips on adding several elements to an array depending on the selected value from various checkboxes?

Error caused by MongoClient TypeError

Ensuring the Accuracy of POST Parameters Using Express-Validator