如何从 v-btn-toggle 获取选定按钮的值？答案

【问题标题】：How to get value of selected button from v-btn-toggle?如何从 v-btn-toggle 获取选定按钮的值？
【发布时间】：2019-02-01 21:20:10
【问题描述】：

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

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

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

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

<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

【讨论】：

这可能是正确的。但是，您忘记保存 codepen :)
非常感谢，祝您有美好的一天）
@ИльяЗеленько 你能解释一下强制是什么意思吗？我已从您的 CodePen 示例中删除了强制，一切仍在工作 - 我可以获取值（所选按钮的索引），就像添加了强制道具

【解决方案2】：

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

【讨论】：

你能解释一下强制是什么意思吗？我已从您的 CodePen 示例中删除了强制，一切仍在工作 - 我可以获取值（所选按钮的索引），就像添加了强制道具
对，不管有没有mandatory prop，它仍然可以工作，因为它只是一种强制始终选择值的方法。有关更详细的示例，请查看他们的 Docs