如果multiple属性为true，则必须将模型绑定到数组 Download

我想设置规则以某种方式验证我的表单，至少应选择v-btn-toggle组中的一个按钮（很多）

对于v-text-field组件，我们可以通过prop规则来验证表单，但是在与v-btn-toggle相关的文档中找不到相似的内容。

任何实现我目标的途径？谢谢

编辑：

我用发布问题之前尝试的方法更新了问题，但猜测为什么在下面的答案后它不起作用。

这是我的代码：

  <v-app>
    <v-form
      ref="form"
      v-model="valid"
      lazy-validation
    >
      <div>
        <v-btn-toggle
          v-model="toggleIt"
          rounded
          multiple
          mandatory
        >
            <v-btn>
              <v-icon>mdi-format-align-left</v-icon>
            </v-btn>
            <v-btn>
              <v-icon>mdi-format-align-center</v-icon>
            </v-btn>
            <v-btn>
              <v-icon>mdi-format-align-right</v-icon>
            </v-btn>
            <v-btn>
              <v-icon>mdi-format-align-justify</v-icon>
            </v-btn>
          </v-btn-toggle>
      </div>

      <v-btn
        :disabled="!valid"
        color="success"
        class="mr-4"
        @click="validate"
      >
        Validate
      </v-btn>
    </v-form>
  </v-app>

当toggleIt设置为undefined或null时，我在浏览器控制台中收到以下错误消息：

  

[Vuetify]如果multiple属性为   是的。

如果我将toggeleIt设置为一个空数组，该错误消失，但验证无效

Codepen

1 个答案:

答案 0 :(得分：0)

使用v-btn-toggle进行验证将永远无法进行，因为它不是输入（根据Vuetify），并且没有rules道具。

只需编写您自己的“ isValid”计算属性：

computed: {
  isValid() {
   return this.valid && this.toggleIt.length > 0
  }
}