VueJS：v-for循环外修改输入框值及$refs引用异常问题

我来帮你分析一下问题所在，以及对应的解决方案：

问题根源 #

你遇到的问题主要来自两个方面：

1. DOM更新的异步性：当sessionId变化时，你调用了getPlacesInCart()获取数据，这个请求是异步的——数据返回后places才会更新，Vue需要时间重新渲染DOM并同步更新$refs。你在watch sessionId的回调里直接访问$refs，此时DOM还没完成更新，自然找不到对应的引用。
2. ref键的类型与v-for的处理逻辑：
   • Vue会把ref绑定的数字类型值自动转为字符串作为键，所以你需要用字符串形式的ID去访问（比如this.$refs["15129"]而不是this.$refs[15129]）。
   • 在v-for中使用ref时，Vue会将同一ref标识的元素收集为数组，哪怕只有一个元素，所以你需要通过数组索引[0]来获取实际的DOM元素。

解决方案 #

方案1：监听places的变化，在DOM更新后访问ref

把访问ref的逻辑移到places的watch回调中，并用$nextTick确保DOM已完成渲染：

watch: {
  sessionId: function () {
    console.log('this.sessionId ', this.sessionId);
    this.getPlacesInCart();
  },
  places: function () {
    // 等待DOM更新完成
    this.$nextTick(() => {
      // 用字符串形式的ID访问，并且取数组第一个元素
      const inputRef = this.$refs[String(15129)]?.[0];
      if (inputRef) {
        console.log('找到输入框：', inputRef);
        // 这里可以修改输入框的值，比如 inputRef.value = 新值;
      }
    });
  }
}

方案2：在getPlacesInCart的请求回调中处理

如果getPlacesInCart是返回Promise的异步方法，可以在它的then回调里用$nextTick访问ref：

// 假设getPlacesInCart返回Promise
getPlacesInCart() {
  return axios.get('/api/cart/places')
    .then(res => {
      // 这里写更新places的逻辑
      this.$nextTick(() => {
        const inputRef = this.$refs[String(15129)]?.[0];
        if (inputRef) {
          // 处理输入框的逻辑
        }
      });
    });
}

额外建议：通过v-model直接更新数据

其实你已经用了v-model="entrance.value"，完全可以不用操作DOM元素，直接修改places.entrance中对应项的value值，Vue会自动更新输入框的内容，这才是Vue数据驱动的正确姿势：

// 找到对应entrance项并更新value
const targetEntrance = this.places.entrance.find(item => item.id === 15129);
if (targetEntrance) {
  targetEntrance.value = 你从购物车获取到的数量;
}

这种方式不需要依赖$refs，更符合Vue的设计理念，也避免了DOM操作的潜在问题。

内容的提问来源于stack exchange，提问作者Evgeny Ladyzhenskiy