Estoy tratando de permitir que mis usuarios revisen un objeto que contiene diferentes elementos.
Ejemplo de objeto de records :
0: {id: 1, pipeline_id: 1, raw: '1', completion: null, processed: 0, …} 1: {id: 2, pipeline_id: 1, raw: '2', completion: null, processed: 0, …} 2: {id: 3, pipeline_id: 1, raw: '3', completion: null, processed: 0, …} 3: {id: 4, pipeline_id: 1, raw: '4', completion: null, processed: 0, …} 4: {id: 5, pipeline_id: 1, raw: '5', completion: null, processed: 0, …}Estoy usando Vue3 y Collect.js como a continuación:
const props = defineProps({ records: { type: Object, }, }); let currentRecord = collect(props.records).first(); const nextRecord = () => { // Set "currentRecord" to the next item in the "records" array. currentRecord = collect(props.records).slice(props.records.indexOf(currentRecord) + 1).first(); console.log(currentRecord) } Los usuarios pueden barajar la matriz utilizando el método nextRecord :
<textarea v-model="currentRecord.raw"></textarea> <a @class="nextRecord">Skip Record</a> El código anterior cambia con éxito el registro actual en el archivo console.log , pero no en el <textarea> .
¿Qué estoy haciendo mal?
Defina currentRecordIndex inicializado con 0 e increméntelo usando el controlador de eventos de clic y use la propiedad computed para devolver el currentRecord :
import {computed,ref} from 'vue' const props = defineProps({ records: { type: Object, }, }); let currentRecordIndex =ref(0) let currentRecord = computed(()=>collect(props.records).slice(currentRecordIndex.value).first()); const nextRecord = () => { currentRecordIndex.value++; }