javascript - 如何从 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>

用户只能选择一个选项。如何获取所选按钮的值？

Answer 1

第一个答案是正确的，只是添加了另一个选择......如果您想拥有/获得自定义值，例如 50、100 等，只需添加 :value 属性

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>