vee验证按钮验证

Question

我对vee验证相当陌生。我想知道如何验证是否按下了按钮。我已经用ValidationObserver将我的表单包装成一个无效的v-slot。我希望用户被要求选择一个按钮，这将允许用户继续到下一页。

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

<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 validate的validation-provider会尝试查找具有v-model的节点/标记，并监视它们的更改/更新。

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

最终它应该是这样的：

<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>

在某种程度上，它类似于创建radio或checkbox输入组件，具体取决于是否允许多重选择。