Question

我有这样的东西：

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，则将看到第二组复选框，依此类推。

现在的问题是，当我尝试将其设置为相同的变量时，如果单击复选框，它将把值添加到options变量中，但是如果您选中单选按钮，它将对其进行转换并它不再是数组，并且复选框开始像单选按钮一样起作用。

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

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

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

谢谢！

Answer 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)
  }
  }
})

Vuetify / Vuejs单选组和复选框组设置为相同的v模型

1 个答案: