Soy principiante en vue y desarrollo web. Hago mi aplicación con Laravel y Vue.
tengo este codigo:
created: function () { let self = this; self.setActive('tab1'); axios.get(this.$apiAdress + '/api/tasks/create?token=' + localStorage.getItem("api_token")) .then(function (response) { self.documentDircionary = response.data.documentDircionary; self.selectedDocumentDircionary = response.data.selectedDocumentDircionary; }).catch(function (error) { console.log(error); self.$router.push({path: '/login'}); }); <template v-for="(option) in documentDircionary"> <div class="form-group form-row" :key="option.name"> <CCol sm="12"> <input type="checkbox" name="selectedDocuments[]" :id="option.value" /> {{ option.label }} </CCol> </div> </template>Este código me muestra entradas, y funciona bien. Tengo un problema con el atributo seleccionado establecido para la casilla de verificación seleccionada.
En la matriz de resultados seleccionadosDocumentDircionary de api:
"selectedProducts": [1,2,43]¿Cómo puedo marcar solo esta casilla de verificación, con productos seleccionados?
por favor, ayúdame
Puede usar el atributo :checked para marcar la casilla de verificación marcada según los productos selectedProducts que tiene.
Demostración de trabajo:
const app = new Vue({ el: '#app', data() { return { selectedProducts: [1, 2, 43], documentDircionary: [{ name: 'checkbox1', value: 1, label: 'Checkbox 1' }, { name: 'checkbox2', value: 2, label: 'Checkbox 2' }, { name: 'checkbox3', value: 3, label: 'Checkbox 3' }, { name: 'checkbox4', value: 4, label: 'Checkbox 4' }, { name: 'checkbox43', value: 43, label: 'Checkbox 43' }] } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script> <div id="app"> <template v-for="option in documentDircionary"> <div :key="option.name"> <input type="checkbox" name="selectedDocuments[]" :id="option.value" :checked="selectedProducts.includes(option.value)" /> {{ option.label }} </div> </template> </div>Puede establecer :checked en función de si la identificación del elemento actual está en la matriz:
<template v-for="(option) in documentDircionary"> <div class="form-group form-row" :key="option.name"> <CCol sm="12"> <input type="checkbox" name="selectedDocuments[]" :id="option.value" :checked="selectedProducts.includes(option.value)" /> {{ option.label }} </CCol> </div> </template>