CODEWITHSUNDEEP
javascriptvue.js
HMR
HMR

Reputation: 39270

vue bind checkbox checked to result of function and passing it a value

My template looks something like this:

<label >
  <input 
    type="checkbox" 
    name="facet.name" 
    :value="term.term"
    :checked="isChecked(facet.name)"
    v-on:change="filerChange($event, facet.name)"
  >
    {{term.term}} <span class="facet-count">({{term.count}})</span>
</label>

In my script I have the method:

isChecked(name) {
  // eslint-disable-next-line no-prototype-builtins
  return this.$route.query.hasOwnProperty(name);
},

This works but only on initial render, when I check or uncheck the checkbox it will not call isChecked again and just toggle the checkbox.

Upvotes: 1

Views: 739

Answers (1)

spMaax
spMaax

Reputation: 395

Methods written with args in the template are called during render. To avoid that use an arrow function that will call your target method.

<label >
  <input 
    type="checkbox" 
    name="facet.name" 
    :value="term.term"
    :checked="() => isChecked(facet.name)"
    v-on:change="() => filerChange($event, facet.name)"
  >
    {{term.term}} <span class="facet-count">({{term.count}})</span>
</label>

Upvotes: 2

Related Questions