Soy nuevo en Vue js. Estoy tratando de hacer un formulario de acción para el resto de la API. No sé cómo obtener los datos de nombre y ubicación solo. Estaba tratando de usar slice en Array, pero no funciona.
Mi formulario de acción:
<div class="form-group"> <label class="required"> Social Media </label> <b-form-checkbox v-for="event in events" :key="event._id" :value="event" v-model="selected"> {{event.name}}, {{event.location}} </b-form-checkbox> <span class="mt-3">Selected: <strong>{{ selected }}</strong></span> </div>Mi instancia de Vue
export default { data() { return { events: [{ "_id": "d4d81da6-b453-4a31-999f-a2ea04848ee9", "name": "A", "location": "US", "__v": 0 }, { "_id": "91205d34-4480-4e4e-bdf7-fe66e46922b0", "name": "B", "location": "Korea", "__v": 0 }, { "_id": "0b168c44-4f38-4f86-8ee6-e077333aca95", "name": "C", "location": "Japan", "__v": 0 }], selected: '' }; } }La salida al marcar la primera opción de la casilla de verificación:
Selected: ["_id": "d4d81da6-b453-4a31-999f-a2ea04848ee9", "name": "A", "location": "US", "__v": 0]Salida esperada al marcar la primera opción de la casilla de verificación:
Selected: [ "name": "A", "location": "US" ]En primer lugar, haga Selected:false boolean ... luego haga un botón y al hacer clic llegará a una función que aceptará un parámetro, iterará su matriz y seleccionará un objeto que coincida con el parámetro
private selectFun(item){this.events.filter(val=>{val._id===item._id})//and then whatever}Puede crear la estructura necesaria dentro de la asignación :value="" .
<b-form-checkbox v-for="event in events" :key="event._id" :value="{ name: event.name, location: event.location }" v-model="selected"> {{event.name}}, {{event.location}} </b-form-checkbox>