Vue Material Checkbox Checked

Question

I have tried / guessed at every combination of v-bind/v-model/:checked/:value I can think of, but I can't get these damn checkboxes checked on load:

Using Vue Material / Vue3:

    <div v-if="items.length">
      <div
        v-for="(value,key,index) in this.items"
        :key="index"
        :ref="'icon'+items[key].id">
        <md-checkbox
          :id="'TDS'+key"
          v-model="items[key].complete"
          true-value="1"
          @change="doDo(items[key].id)"
          class="md-primary m-0"
          >
          {{ items[key].item }} {{items[key].complete}}
        </md-checkbox>
      </div>
    </div>

The bit I can't figure out is how to make the checkbox checked if items[key].complete=1 when data is loaded.

Answer 1

This one should already work, if you receive your data properly, it may update itself due to reactivity. Maybe try v-model="!!items[key].complete" just to be sure that your value is coerced to a Boolean.

Answer 2

You are already inside the loop

v-model="value.complete"

Same goes for all other bindings.

And your data should not be accessed with this in your template

v-for="(value,key,index) in items"