CODEWITHSUNDEEP
vue.jsvuejs2quasarquasar-framework
Tom
Tom

Reputation: 1457

V-model of the q-toggle in a q-data-table row

I'm trying to put a toggle in each of my row in a data table. For now I have that : Displays ok but can't click

So two of my columns ('active' and 'shared') are booleans. It displays ok depending on the value of the boolean, but if I click the toggle, I get an error. I think it is because the v-model of my toggle is col.value and I am not allowed to modify it. The thing is, I don't know how to bind directly the v-model to my original object ?

Here is my simplified code (template part): 

<q-table>
 <q-tr slot="body" slot-scope="props" :props="props" >
   <q-td v-for="col in props.cols" :key="col.name" :props="props">
     <div v-if="['templateActive', 'templateShared'].includes(col.name)">
       <q-toggle v-model="col.value"/>
     </div>
     <div v-else>
        {{col.value}}
      </div>
    </q-td>
  </q-tr>
</q-table>

Bonus question : why does SO keep removing my "hi everybody" at the beginning of my post ?

Upvotes: 1

Views: 2827

Answers (1)

Tom
Tom

Reputation: 1457

Ok, so I found a solution, but it needs a v-if case for each q-toggle I want to use, so if anybody has a more elegant solution, I am still interested. Meanwhile, here is a solution (using props.row.myToggleValue instead of col.value): 

<q-table>
 <q-tr slot="body" slot-scope="props" :props="props" >
   <q-td v-for="col in props.cols" :key="col.name" :props="props">
     <div v-if="['templateActive'].includes(col.name)">
       <q-toggle v-model="props.row.active"/>
     </div>
     <div v-else_if="['templateShared'].includes(col.name)">
        <q-toggle v-model="props.row.shared"/>
     </div>
     <div v-else>
        {{col.value}}
      </div>
    </q-td>
  </q-tr>
</q-table>

Upvotes: 1

Related Questions