Vue.js - Set dynamic checkbox value true/false

Question

I have table which has some list of products, now for every product there is an upload file and a completed checkbox,

<vs-table :data="fileUpload">
   <template slot="header">
      <h3>
         Upload Files
      </h3>
   </template>
   <template slot="thead">
      <vs-th>
         Data
      </vs-th>
      <vs-th>
         Upload Files
      </vs-th>
      <vs-th>
         Uploaded
      </vs-th>
   </template>
   <template slot-scope="{ data }">
      <vs-tr :key="indextr" v-for="(tr, indextr) in data">
         <!--<vs-tr>-->
         <vs-td>
            {{tr}}
         </vs-td>
         <vs-td>
            <div class="centerx">
               <input type="file" v-on:change="handleFileUpload($event,indextr)" />
            </div>
         </vs-td>
         <vs-td>
            <vs-checkbox v-model="completedCheckboxes" :vs-value="indextr"></vs-checkbox>
         </vs-td>
      </vs-tr>
   </template>
</vs-table>

now on the change event of handleFileUpload I want to set the checkbox next to it as true.

handleFileUpload: async function(event,checkboxIndex) {
//set checkbox for that row here
}

 data() {
    return {
    completedCheckboxes:[],
 }
}

now i do get the checboxes value in completedCheckboxes array If i select them manually, but cant seem to work through code, I went over many solutions but nothing worked for me, any help?

Boussadjra Brahim · Accepted Answer · 2020-07-30 11:42:36Z

2

Since the check box is the index try to push that uploaded file index to the completedCheckboxes array :

handleFileUpload: async function(event,checkboxIndex) {
    this.completedCheckboxes.push(checkboxIndex)
}

answered Jul 30, 2020 at 11:42

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

uneeb meer Over a year ago

That did the trick, thanks buddy keep up the good work!

Ilijanovic Over a year ago

@uneebmeer does it need to be async?

uneeb meer Over a year ago

in my case the file upload was needed to be done async thats why i added that, that was not related to the actual problem you can leave that out.

Collectives™ on Stack Overflow

Vue.js - Set dynamic checkbox value true/false

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related