V-модель переключателя q в строке таблицы q-data - PullRequest
Новая
       33

V-модель переключателя q в строке таблицы q-data

0 голосов
/ 08 мая 2018

Я пытаюсь поставить переключатель в каждой строке в таблице данных. На данный момент у меня есть это: Displays ok but can't click

Таким образом, два моих столбца («активный» и «общий») являются логическими значениями. Он отображается нормально в зависимости от значения логического значения, но если я нажимаю на переключатель, я получаю сообщение об ошибке. Я думаю, это потому, что v-model моего переключателя col.value, и мне не разрешено его изменять. Дело в том, что я не знаю, как напрямую связать v-model с моим исходным объектом?

Вот мой упрощенный код (часть шаблона): 

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

Бонусный вопрос: почему ТАК продолжает удалять моего "Привет всем" в начале моего поста?

1 Ответ

0 голосов
/ 08 мая 2018

Хорошо, так что я нашел решение, но для каждого q-переключателя, который я хочу использовать, нужен случай v-if, поэтому, если у кого-то есть более элегантное решение, мне все равно интересно. Между тем, вот решение (использование props.row.myToggleValue вместо 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>
...