I'm attempting to allow my users to browse through a collection of various items.
Take a look at the records object below:
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, …}
In my implementation with Vue3 and Collect.js, I have the following setup:
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)
}
Users can navigate through the collection using the nextRecord method:
<textarea v-model="currentRecord.raw"></textarea>
<a @class="nextRecord">Skip Record</a>
While the above code successfully updates the current record in the console.log, it doesn't reflect in the <textarea>. Any ideas on where I might be going wrong?