我試圖讓我的用戶通過一個包含不同專案的物件。
物件示例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>
上面的代碼成功地改變了 中的 currentRecord console.log，但沒有改變<textarea>.
我究竟做錯了什么？
uj5u.com熱心網友回復：
使用 click 事件處理程式定義currentRecordIndex初始化0并遞增它，并使用computed屬性回傳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 ;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/455345.html