如何正确处理"hasvalue"？

Question

在 VueFormulate 中，如果我没记错的话，只要单击单选框或复选框，“hasvalue”就会添加到输入元素。

我现在想知道如何再次“手动”删除它。

采用这种形式： https://codesandbox.io/s/vue-formulate-reproduction-template-forked-swy2f?file=/src/components/Reproduction.vue

我必须输入元素：第一个包含 3 个单选按钮，第二个包含 2 个复选框。当单击第三个单选按钮时，带有复选框的第二个表单变得可见（在这种情况下：不透明度 – 最初设置为 0.35 – returns 到 1）。

一旦第二个表单可见，“required”属性就会发生变化，这使得“require”验证消息出现。单击另一个单选框或激活复选框时，它会再次被删除。

到目前为止一切顺利。

执行以下步骤时出现问题：

点击第三个单选按钮
勾选复选框
单击另一个单选按钮（“一个”或“两个”）

复选框再次变得不可见，而且复选框再次取消选中——这是重要的部分。

再次点击第三个单选按钮

现在复选框再次可见，但未显示所需的消息。

这是因为输入元素仍然具有“hasvalue”属性，我不知道如何在步骤 3 中将其删除。

目前我有取消勾选的功能：

clearCheckboxes() {
    const fields = document.querySelectorAll('input[name="training_focus"]')
    const fieldsArr = Array.from(fields)

    fieldsArr.forEach(item => {
        item.checked = false
        item.hasvalue = false // <= this is the "bad boy"
        item.removeAttribute('hasvalue') // does not work either
    })
}

处理这种情况的正确方法是什么？

Answer 1

对于那些感兴趣的人，Justin Schroeder 发布了一个使用 v-if 的工作示例：

https://codesandbox.io/s/vue-formulate-reproduction-template-forked-k8jn3?file=/src/components/Reproduction.vue

如何正确处理"hasvalue"？

How to handle "hasvalue" properly?

vue.js

vue-formulate