我在 vue3 中发生了奇怪的事情

Question

所以我有这个输入循环（下面的代码:)）。所以基本上我试图通过一个唯一的引用来获取该循环中的每个输入，就像它在 Vue3 文档中解释的那样 => Here

我有这个数组 inputs，我在其中保存了文档建议的所有输入。我想在这里实现的是获得最后的价值。但我面临一个奇怪的问题，这就是我来这里的原因。因此，当我尝试 console.log 该数组的最后一个值时，我得到的是之前的最后一个而不是最后一个（我将用图像解释以获得更多理解）。当我 console.log inputs array 我可以看到它包含最后一个值，但我无法用我尝试的所有方法得到它：

console.log(inputs.value[inputs.value.length-1])
console.log(inputs.value.at(-1))

html代码：

<n-card v-for="(item, index) in counter" :key="index" title="Card">
   <div v-if="item.val == 'radio'">
    <div class="row" v-for="(i, index) in item.items" :key="index">
          <div class="col-1">
            <n-icon size="25">
              <radio-icon></radio-icon>
            </n-icon>
          </div>
          <div class="col-10">
            <n-input
              :ref="el => {if (el) inputs[index] = el}"
              @focus="$event.target.select()"
              v-model:value="i.name"
              placeholder="taper ici"
              >
            </n-input>
          </div>
          <div class="col-1">
            <n-button v-if="item.items.length > 1"
              @click="deleteOption(item.id, i.id)"
            >
              <n-icon size="20">
                <delete-icon />
              </n-icon>
            </n-button>
          </div>
        </div>
      </div>
    </n-card>

脚本：

const Add = id => {
  const found = counter.value.find(item => item.id === id)
  if (found.items.length > 0){
    let lastValue = found.items[found.items.length-1].inc
    lastValue++
    found.items.push(
      {
        id: new Date().valueOf(),
        name: `option ${lastValue}`,
        inc: lastValue
      }
    )
    inputs.value[inputs.value.length-1].focus()
    console.log(inputs.value[inputs.value.length-1])// here I get before last value
    console.log(inputs.value.at(-1))// here I get before last value
    console.log(inputs.value)//here I get all inputs including last one
  }
  else {
    let lastValue = 1
    found.items.push(
      {
        id: new Date().valueOf(),
        name: `option ${lastValue}`,
        inc: lastValue
      }
    )
  }
}

请大家帮忙，抱歉我的英语不好。我会在 github 中推送代码。如果有人想查看完整代码并希望提供帮助。我将不胜感激任何帮助。快把我逼疯了。

Answer 1

我认为问题在于，在设置数据和尝试在“ui”(inputs) 列表中搜索数据之间没有“重新呈现”。尝试在 found.items.push 之后添加 await nextTick()。然后 vue 可以重新渲染并且 v-for 会将项目添加到 inputs。

我在 vue3 中发生了奇怪的事情

Strange thing happening with me in vue3

refs

vue.js

vuejs3