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

您需要向组件添加mandatory选项：v-btn-toggle

<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>

toggle_one要获取可以使用v-model="toggle_one" 变量的值。

Codepen 示例