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

【问题标题】：Strange thing happening with me in vue3我在 vue3 中发生了奇怪的事情
【发布时间】：2022-01-22 23:24:48
【问题描述】：

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

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

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中推送代码。如果有人想查看完整代码并想提供帮助。我会很感激任何帮助。它快把我逼疯了。

【问题讨论】：

您需要:ref 做什么？你的for 循环循环在item.items 上，而不是inputs。是错字还是您的示例代码有误？
为了简单起见，我做了那个例子
好的，请更新问题中的真实代码，否则会误导为错字。谢谢。
我可以放一个链接让你在 github 上查看完整的代码吗？
GitHub里的代码在这里没用。这不是一个论坛。这是一个问答数据库。你的问题越持久，它就越能帮助别人。请在此处发布所有相关代码。

标签： vue.js vuejs3 refs

【解决方案1】：

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

【讨论】：