Vue.js vee验证按钮验证

Vue.js vee验证按钮验证,vue.js,vee-validate,Vue.js,Vee Validate,我刚接触vee validate。我想知道您如何验证按钮是否已按下。我已经用ValidationObserver包装了我的表单,其中有一个v形槽无效。我希望用户被要求选择一个按钮,这将允许用户继续到下一页 我正在包装表单的验证观察员代码: <ValidationObserver v-slot="{ invalid }"> ...some code </ValidationObserver> …一些代码 下面的代码是我需要知道如何设置用户从列表中

我刚接触vee validate。我想知道您如何验证按钮是否已按下。我已经用ValidationObserver包装了我的表单,其中有一个v形槽无效。我希望用户被要求选择一个按钮,这将允许用户继续到下一页

我正在包装表单的验证观察员代码:

<ValidationObserver v-slot="{ invalid }">
 ...some code
</ValidationObserver>

…一些代码
下面的代码是我需要知道如何设置用户从列表中选择按钮所需的验证

<v-col cols="6" v-for="(opt, index) in options" :key="index">
      <v-btn @click="selectedOption(index)">
        {{ opt.name }}
      </v-btn>
</v-col>

{{opt.name}
在表单的末尾,我有一个按钮,允许用户继续。在表单完成且没有验证错误之前,该按钮处于禁用状态。但我还想确保,如果客户从列表(上面的代码)中选择按钮,它将启用按钮,否则它应该被禁用

<v-btn :disabled="invalid">
Continue
</v-btn>

继续

您的按钮需要支持并应用
v-model
指令,vee validate的
验证提供程序尝试查找带有
v-model
的节点/标记,并监视它们的更改/更新

因此,您需要在
v-btn
周围创建一个包装组件

最终应该是这样的:


{{opt.name}
在某种程度上,它类似于创建
收音机
复选框
输入组件,具体取决于您是否允许多个选择