I am trying to let my users go through an object that contains different items.
Example of records
object:
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, …}
I am using Vue3 and Collect.js like below:
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)
}
The users can shuffle through the array using the nextRecord
method:
<textarea v-model="currentRecord.raw"></textarea>
<a @>Skip Record</a>
The above code successfully changes the currentRecord in the console.log
, but not in the <textarea>
.
What am I doing wrong?
CodePudding user response:
Your currentRecord has to be reactive to work the way you intend.
I.e.
const currentRecord = reactive(collect(props.records).first());
otherwise it is non-reactive and doesn't change UI when its value has changed.
CodePudding user response:
Define currentRecordIndex
initialized with 0
and increment it using the click event handler and use computed
property to return the 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 ;
}