[SOLVED] How to handle "hasvalue" properly?

How to handle "hasvalue" properly?

In VueFormulate "hasvalue" is added to an input element as soon soon as a radio or checkbox is clicked, if I am not mistaken.

I would like to know now to remove it again "manually".

In this form: https://codesandbox.io/s/vue-formulate-reproduction-template-forked-swy2f?file=/src/components/Reproduction.vue

I have to input elements: the first one consists of 3 radio buttons, the second of 2 checkboxes. When clicking on the 3rd radio button the second form with the checkboxes becomes visible (in this case: the opacity – initially set to 0.35 – returns to 1).

As soon as the second form becomes visible, the "required" attribute changes, which makes the "require" validation message appear. It is removed again, when either another radio box is clicked or a checkbox is activated.

So far so good.

The problem appears, when following these steps:

Click the 3rd radio button
Chick a checkbox
Click another radio button (either "one" or "two")

The checkbox becomes invisible again, but also the checkboxes are unchecked again – this is the important part.

Click the 3rd radio button again

Now the checkboxes become visible again, but the required message is not shown.

This is due to the fact that the input element still has a "hasvalue" attribute living on it, which I do not know how to remove in step 3.

Currently I have this function to unset the checkboxes:

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

What would be the proper way to handle that situation?

Solution