CODEWITHSUNDEEP
vue.jsvuetify.js
Philyphil
Philyphil

Reputation: 25

How can I remove the check in a Vuetify v-checkbox

I'm loading data in a datatable with an API call.The first row has a checkbox in the first column. The user checks the checkbox presses a button and the selected row is removed, via another API call, and the row below it moves up and will now have the checkbox associated with it.

My issue is the v-checkbox stays checked after the second API call. How can I remove the check from it?

I've tried grabbing the v-checkbox element using getElementById and setting checked to false, getElementById('myCheckBox').checked = false but that didn't work.

<v-checkbox
  class='double'
  @change='selectRow(props.index)'
  :value='props.item.ProcessNumber'
  unchecked-value='Pick'
  v-model='selectedNumber'
  id='myCheckBox'
  ></v-checkbox>

<script>
  var checkBox = getElementById('myCheckBox');
  checkBox = false;
</script>

Upvotes: 0

Views: 2960

Answers (1)

Blitz
Blitz

Reputation: 500

Is this what you're trying to do ? https://codesandbox.io/s/vue-template-qx4nt

You are using Vue, and you will probably never have to manipulate the dom yourself (only advanced cases). If you are, you are probably usin it wrong. It's often a bad idea to bypass the virtual DOM.

<template>
  <div id="app">
    <v-btn @click="load" :loading="loading">load</v-btn>
    <v-btn @click="remove">remove</v-btn>
    <v-list>
      <v-list-item v-for="(item, index) in items" :key="index">
        <v-checkbox v-model="selected" :value="item" multiple/>
        {{ item }}
      </v-list-item>
    </v-list>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    loading: false,
    selected: [],
    items: []
  }),
  methods: {
    async load() {
      this.loading = true;

      const items = await new Promise(resolve => {
        setTimeout(() => resolve([1, 2, 3]), 2000);
      });

      this.items = items;
      this.loading = false;
    },
    remove() {
      this.items = this.items.filter(i => !this.selected.includes(i));
      this.selected = [];
    }
  }
};
</script>

Upvotes: 1

Related Questions