1

I cannot for the life of me figure this out.

Fiddle at: https://jsfiddle.net/s8xvkt10/

I want

  1. User clicks checkbox
  2. Then based on separate conditions
  3. Checkbox calculatedCheckedValue returns a data property /v-model of true/false
  4. And the checked state reflects the calculatedCheckedValue

I can get:

  1. The calculatedCheckedValue calculates and interpolates properly

But I fail at:

  1. Having the :checked attribute render the calculatedCheckedValue properly in the DOM
  2. e.g. If a false checkbox is clicked and the calculatedCheckedValue still returns false, the checkbox toggles onscreen between checked and unchecked

I’ve tried:

  1. Using a v-model with a custom set that does the calculation and sets the local state which the custom get returns
  2. Imitating a v-model using @change.prevent.stop="updateCalculatedValue" and :checked="calculatedValue"
  3. Assuming the @change happens after the @click (which i think is wrong) and using @click.prevent.stop="updateCalculatedValue" and :checked="calculatedValue"

The model is working and rendering the calculated value as string in a DOM span, but the checked value doesn't seem to respect the model value

Can someone please help me out?

Nathaniel Rink
  • 475
  • 4
  • 19
  • "Can someone please help me out?" – not without seeing your code, I'm afraid. – Vince Oct 03 '19 at 17:08
  • I was afraid of that. I'll put something on codesandbox shortly. Thank you – Nathaniel Rink Oct 03 '19 at 17:09
  • I'd suggest creating a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). You can use [this fiddle](https://jsfiddle.net/voveson/hope14qL/1/) as a starting point. – Vince Oct 03 '19 at 17:10
  • Thanks for the start Vince, I think I my attempts up now: https://jsfiddle.net/s8xvkt10/ – Nathaniel Rink Oct 03 '19 at 17:52
  • What's your use case for this, @Nathaniel Rink? It seems like the idea is to optionally override what the user has done with the checkbox, which seems like a potentially bad UX. I know if I click a checkbox, I expect it to be checked. – Vince Oct 03 '19 at 18:04
  • yeah, it's not my ux. It's for a "select all" checkbox with complex rules that opens a "select which set?" modal if there's potential for rules to be broken. But it also needs to indicate checked (all selected), unchecked (none selected), and indeterminate (some selected). The checkbox is the ux instead of a button because 9/10 use cases will be the simple "select all / none" conventions users are used to – Nathaniel Rink Oct 03 '19 at 18:15

1 Answers1

0

I've solved the problem at: https://jsfiddle.net/pc7y2kwg/2/

As far as I can tell, the click event is triggered even by keyboard events (src)

And happens before the @change or @input events (src)

So you can click.prevent the event, but you need to either prevent it selectively or retrigger the event after the calculation.

//HTML Template            
<input :checked="calculatedValue5" @click="correctAnswer" type="checkbox">


//VUE component

data() {
    return {
      calculatedValue5: false,
    };
},      

methods: {
    correctAnswer(e){
            const newDomValue = e.target.checked;
            this.calculatedValue5 = this._calculateNewValue(newDomValue);
            if(this.calculatedValue5 !== newDomValue){
                e.preventDefault();
            }
        }
}

I think this is preventing checkbox value from updating before the data value, which seems to break the reactivity. I'm not sure the technical reason why, but the demo does work

Nathaniel Rink
  • 475
  • 4
  • 19