Vuetify/Vuejs 单选组和复选框组设置为相同的 v-model答案

【问题标题】：Vuetify/Vuejs radio group and checkbox group set to same v-modelVuetify/Vuejs 单选组和复选框组设置为相同的 v-model
【发布时间】：2018-09-17 16:18:25
【问题描述】：

我有这样的事情：

https://jsfiddle.net/eywraw8t/372965/

new Vue({ 
	el: '#app',
  data: {
  	options: []
  }
})

<!DOCTYPE html>
<html>
<head>
  <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">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
     {{ options }}
      <template>
        <v-layout pa-3>
          <v-flex xs12 sm6 offset-sm3>
            <v-form>
              <v-card>
                <v-card-text>
                  <v-radio-group v-model="options">
                    <v-radio
                    label="Radio Option 1"
                    :value="1"
                    ></v-radio>

                    <v-radio
                    label="Radio Option 2"
                    :value="2"
                    ></v-radio>
                  </v-radio-group>
                </v-card-text>
             </v-card>
             <v-divider></v-divider>
             <v-card>   
                <v-card-text>
                  <v-checkbox
                  v-model="options"
                  label="Checkbox Option 3"
                  :value="3"
                  ></v-checkbox>
                  <v-checkbox
                  v-model="options"
                  label="Checkbox Option 4"
                  :value="4"
                   ></v-checkbox>
                </v-card-text>
              </v-card>
              <v-divider></v-divider>
              <v-card>
                <v-card-text>
                  <v-checkbox
                  v-model="options"
                  label="Checkbox Option 5"
                  :value="5"
                  ></v-checkbox>
                  <v-checkbox
                  v-model="options"
                  label="Checkbox Option 6"
                  :value="6"
                   ></v-checkbox>
                </v-card-text>
              </v-card>
            </v-form>
          </v-flex>
        </v-layout>
      </template>
    </v-app>
  </div>
 
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

</body>
</html>

我想为单选按钮和复选框使用相同的变量。进一步解释我正在尝试做的事情。我正在尝试将一组单选按钮和复选框组合在一起。如上所示，我有 1 组单选按钮和 2 组复选框。我正在尝试创建一个表单，用户将在其中选择一个选项，然后根据他们选择的内容向用户显示另一组选项。因此，如果他们选择选项 1，他们将看到单选按钮，如果选择选项 2，他们将看到第二组复选框，依此类推。

现在的问题是，当我尝试将其设置为相同的变量时，如果您单击复选框，它会将值添加到选项变量中就好了，但是如果您选中单选按钮，它将转换它并它不再是一个数组，复选框开始像单选按钮一样。

最终我想重置其他所有内容，除了在该组中选择的内容。

如果有更好的方法，我愿意接受建议，或者如果有人知道如何制作，这样当您选择收音机时，它只会将值设置为数组。

注意：如果我将单选按钮设置为:value="[1]"，它会起作用，但是当您选择复选框时，它将重置单选按钮并将值保留在数组中。

谢谢！

【问题讨论】：

真的有必要只使用一个v-model变量吗？为什么不使用三个变量（每组一个）？你总是可以使用 e。 G。计算属性以将所有三个变量组合成一个结果，例如。 G。包含值的数组。
@BennettDams 没有必要，Matti 的答案似乎很合理，可能会奏效。

标签： javascript forms vue.js vuetify.js

【解决方案1】：

您最好的选择是将这些分成模型的三个不同值，并观察值并在必要时将其清除（更改组）。我在这里上传了一个小提琴：https://jsfiddle.net/qth0Lb5w/ 但它的要点是以下代码。

如果传递的新值包含元素（也就是您选中了一个框或单选按钮），则每个手表都会清除其他组。计算属性只是将它们全部连接在一起，因为其他属性应该是空的，这无关紧要。

new Vue({ 
    el: '#app',
  data: {
    opt1: -1,
    opt2:[],
    opt3:[]
  },
  watch:{
   opt1: function (n, o) {
      if(n > -1){
        this.opt2 = [];
        this.opt3 = [];
      }
    },
    opt2: function(n, o){
        if(n.length > 0){
       this.opt1 = -1;
       this.opt3 = [];
      }
    },
    opt3: function(n, o){
        if(n.length > 0){
       this.opt1 = -1;
       this.opt2 = [];
      }
    }
  },
  computed:{
  options : function(){
   return (this.opt1 > -1 ? this.opt1 : []).concat( this.opt2).concat( this.opt3)
  }
  }
})

【讨论】：

是的，这似乎是目前最简单的方法。我去看看
@Matt dangit 我在小提琴中更改了它，但没有在我的代码中修复它不是我。对此感到抱歉。