CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
uneeb meer
uneeb meer

Reputation: 973

Vue.js - Set dynamic checkbox value true/false

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?

Upvotes: 0

Views: 266

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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)
}

Upvotes: 2

Related Questions