vee验证按钮验证

Question

我刚接触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>

和结束我的形式我有按钮，允许用户继续。该按钮将被禁用，直到表单完成并且没有验证错误。但我也想确保它将启用按钮，如果客户从列表中选择按钮（上面的代码），否则它应该被禁用

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

Answer 1

您的按钮需要支持并应用v-Model指令，来自vee-valester的验证提供程序试图找到具有v-Model的节点/标记并监视它们的更改/更新。

因此，您需要围绕实现v-model支持的v-btn创建一个包装组件。

最终它应该是这样的：

<v-col cols="6" v-for="(opt, index) in options" :key="index">
  <ValidationProvider :name="`btn_${index}`" >
    <CustomButtonInput v-model="selectedOption">
      {{ opt.name }}
    </CustomButtonInput>
  </ValidationProvider>
</v-col>

在某种程度上，它类似于创建一个单选或复选框输入组件，这取决于您是否允许多个选择。