情況
我正在構建一個自定義過濾組件。這允許用戶應用在模板n中顯示的過濾器。v-for用戶可以更新輸入欄位中的任何值或之后洗掉任何過濾器。
問題
洗掉一個過濾器后，我的陣列itemRefs得到一個null值作為最后一項。
代碼（簡化）
<script setup>
const filtersScope = $ref([])
const itemRefs = $ref([])
function addFilter () {
filtersScope.push({ value: '' })
}
function removeFilter (idx) {
filtersScope.splice(idx, 1)
itemRefs.pop() // <- necessary? has no effect
// validate and emit stuff
console.log(itemRefs)
// itemRefs got at least one null item
// itemRefs = [null]
}
// assign the values from the input fields to work with it later on
function updateValue() {
itemRefs.forEach((input, idx) => filtersScope[idx].value = input.value)
}
</script>
<template>
<div v-for="(filter, idx) in filtersScope" :key="filter.id">
<input
type="text"
@keyup="updateValue"
:ref="(input) => { itemRefs[idx] = input }"
:value="filter.value"
>
<button @click="removeFilter(idx)" v-text="'x'" />
</div>
<button @click="addFilter()" v-text="'add filter '" />
</template>
>>>作業演示
重現：
- 添加兩個過濾器
itemRefs現在得到模板 refs 作為參考，例如：[input, input]- 洗掉一個過濾器，
itemRefs現在看起來：[input, null] - 洗掉最后一個過濾器，
itemRefs現在看起來像：[null]
問題
在洗掉并應用新過濾器后，如果沒有itemRefs.pop()出現以下錯誤：
未捕獲的型別錯誤：輸入為空
使用該pop()方法可以防止控制臺錯誤，但仍然存在null-value in 。itemRefs
如何干凈地清理我的模板參考？
uj5u.com熱心網友回復：
我不知道使用$refsinside是怎么回事，$refs但它顯然沒有像人們期望的那樣作業。
但是，您永遠不需要嵌套$refs. 改變資料時，改變外部$refs. 用于$computed獲取該資料的簡化/聚焦角度/切片。
這是一個作業示例。
<script setup>
const filtersScope = $ref([])
const values = $computed(() => filtersScope.map(e => e.value))
function addFilter() {
filtersScope.push({ value: '' })
}
function removeFilter(idx) {
filtersScope.splice(idx, 1);
console.log(values)
}
</script>
<template>
<div v-for="(filter, idx) in filtersScope" :key="idx">
<input type="text"
v-model="filtersScope[idx].value">
<button @click="removeFilter(idx)" v-text="'x'" />
</div>
<button @click="addFilter()" v-text="'add filter '" />
</template>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/459025.html