Vue3 - 从对象获取下一个项目 - 值不更新

Question

我试图让我的用户浏览包含不同项目的对象。

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, …}

我正在使用 Vue3 和 Collect.js，如下所示：

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)
}

用户可以使用 nextRecord 方法随机排列数组：

<textarea v-model="currentRecord.raw"></textarea>

<a @class="nextRecord">Skip Record</a>

以上代码成功更改了 console.log 中的 currentRecord，但没有更改 <textarea> 中的 currentRecord。

我做错了什么？

Answer 1

定义 currentRecordIndex 使用 0 初始化并使用单击事件处理程序递增它并使用 computed 属性到 return 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++;
}

Vue3 - 从对象获取下一个项目 - 值不更新

Vue3 - Getting next item from object - value not updating

javascript

vue.js

vuejs3