How to get value of selected button from v-btn-toggle?

Question

<v-btn-toggle v-model="toggle_one">
   <v-btn flat>
      USD50
   </v-btn>
   <v-btn flat>
      USD100
   </v-btn>
   <v-btn flat>
      USD1000
   </v-btn>
   <v-btn flat>
      USD10000
   </v-btn>

User is only allowed to select only one option. How can I get the value of the selected button ?

Answer 1

The first answer is correct just adding another alternative... If you want to have/get the custom value like 50, 100 or etc. just add :value prop

new Vue({
  el: '#app',
  data() {
    return {
      toggle_one: 1,
      quantity: 0,
    }
  }
})

<div id="app">
  <v-app id="inspire">
    <v-toolbar dense>

      <v-btn-toggle v-model="toggle_one" mandatory>
        <v-btn :value="50" flat>
          USD50
        </v-btn>
        <v-btn :value="100" flat>
          USD100
        </v-btn>
        <v-btn :value="1000" flat>
          USD1000
        </v-btn>
        <v-btn :value="10000" flat>
          USD10000
        </v-btn>

      </v-btn-toggle>
      Quantity:
      <v-text-field type="number" solo placeholder="Quantity" v-model="quantity">
      </v-text-field>
    </v-toolbar>
    Selected: $ {{ toggle_one}} x {{ quantity }} = $ {{ toggle_one * quantity }}
  </v-app>
</div>

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

Answer 2

You need to add mandatory option to v-btn-toggle component:

<v-btn-toggle v-model="toggle_one" mandatory>
  <v-btn flat>
    <v-icon>format_align_left</v-icon>
  </v-btn>
  <v-btn flat>
    <v-icon>format_align_center</v-icon>
  </v-btn>
  <v-btn flat>
    <v-icon>format_align_right</v-icon>
  </v-btn>
  <v-btn flat>
    <v-icon>format_align_justify</v-icon>
  </v-btn>
</v-btn-toggle>

To get the value you can use toggle_one from v-model="toggle_one" variable.

Codepen example