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

您需要向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>

要获取该值，您可以使用v-model =“ toggle_one”变量中的toggle_one。

Codepen example

Answer 2

第一个答案是正确的，只是添加了另一种选择... 如果您想拥有/获得自定义值（例如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>

如何从v-btn-toggle获取所选按钮的值？

2 个答案: