如何使用 Vue 创建一个带值的复选框

Question

我正在尝试使用来自 php 文件的数据创建一个表，但我找不到一种方法来创建一个带有 FOLIO 值和 id 的复选框，这是我的方法：门票.vue    <template>    <v-card class="elevation-5 pa-3">    <v-data-table        ref="data_table"        :headers="configuracion.configClientes.encabezados"        expand        rows-per-page-text="Filas por página"        :rows-per-page-items="[10, 20, 55, { text: 'Todas', value: -1 }]"        :no-results-text="'No se han encontrado tickets'"        :item-key="configuracion.configClientes.itemKey"        v-model="seleccion"        :configuracion="configuracion.configClientes"        :items="cat_clientes.catalogo"      >      <template slot="headerCell" slot-scope="props">          <span>            {{ props.header.text }}          </span>      </template>      <template slot="items" slot-scope="props">        <tr>          <td              v-for="columna in configuracion.configClientes.encabezados"              v-if="columna.value !== '$acciones'"              :key="keyUUID()"          >            {{ formatearColumna( props.item, columna ) }}          </td>        </tr>      </template>      <template slot="no-data">        <v-alert :value="true" color="warning" icon="warning">          {{ configuracion.mensajeVacia ? configuracion.mensajeVacia : 'No hay tickets' }}        </v-alert>        </template>      </v-data-table>     </v-card>   </template>

Answer 1

您可能正在寻找true-value并false-value在<v-checkbox>vuetify 组件内部。它可以看起来像这样的小东西。

<v-data-table

            :items="cat_clientes.catalog"

            :headers="this.headers"

            hide-default-headers

            :items-per-page="10"

            :search="search"

    >

        <template v-slot:item.status="{ item }">

            <v-checkbox true-value="Done" false-value="Open" v-model="itemStatus" @change="changeCheckbox(item)"

                        color="primary"/>

        </template>