• Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

100
Views
Vue3 - Getting next item from object - value not updating

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 @class="nextRecord">Skip Record</a>

The above code successfully changes the currentRecord in the console.log, but not in the <textarea>.

What am I doing wrong?

9 months ago · Juan Pablo Isaza
1 answers
Answer question

0

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++;
}
9 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.