Problem with binding boolean attributes in Vuejs (e.g. checkbox)

[patrickvuarnoz]

I'm having problems binding boolean attributes with Vuejs. An example is the <wa-checkbox>:

<!-- This works -->
<sl-checkbox v-bind:checked="checkedOrNot">Name</sl-checkbox>

<!-- This does not work (with cherry picking the checkbox is never ticked initially, with autoloader the checkbox is always ticked initially) -->
<wa-checkbox v-bind:checked="checkedOrNot">Name</wa-checkbox>

<!-- This does not work either, even if Vuejs is forced to set it as property -->
<wa-checkbox v-bind:checked.prop="checkedOrNot">Name</wa-checkbox>

The problem is only the initialization upon first render/display after the Vue component has mounted. If the value of checkedOrNot is changed later via code or interaction then it works just fine.

I guess the difference between Shoelace and Webawesome is the development that has been taken to make the components integrate better with forms. But why v-bind:checked.prop does not work riddles me. v-bind:checked.attr cannot be used to solve the problem on the Vue side because those are boolean attributes and with .attr the attribute would always be present.

For my current situation to be able to switch from SL to WA I created a custom directive that sets the checked attribute (not property) on the component depending on checkedOrNot:

app.directive('boolean', (el, binding) => {
  if (binding.value) {
    el.setAttribute(binding.arg, '');
  } else {
    el.removeAttribute(binding.arg);
  }
});

<wa-checkbox v-boolean:checked="checkedOrNot">Name</wa-checkbox>

It would be really cool if this issue could be identified and solved so that it just works out-of-the-box.

[patrickvuarnoz]

Discussion #141 has the same root cause. See #141 (comment).

[claviska]

I think this and the other binding issues are all related to timing. We're working hard to get the repo ready so we can publish WA free to npm, hopefully in 2-3 weeks if all goes well. I suspect this will solve all of these issues.