Question

我的组件中有一个v-for循环，从服务器获取输入值后，我需要更新输入值。下面，我提供了该组件的完整代码以及当前的问题-我不知道如何更改甚至引用任何输入。我用大写字母在行中标记了无效的代码，并在代码段后提供了更多详细信息

<template>
<div class="allPlaces__entrance" v-for="(entrance, index) in places.entrance" v-bind:key="index">
  <div class="allPlaces__infoBlock">
   <div>
    <div class="allPlaces__available">
     <span class="allPlaces__label allPlaces__label--places">Доступно мест:</span>
     <span class="allPlaces__data">&nbsp;{{entrance.vacant_places}} 
     </span>
    </div>
    <div class="allPlaces__title allPlaces__title--entrance">{{getEntranceName(entrance)}}</div>
    </div>
    <div class="allPlaces__price">
     <span class="allPlaces__label">Цена: </span>
     <span class="allPlaces__data">{{entrance.price}}</span>
    </div>
    </div>

    <div class="allPlaces__orderBlock">
     <div class="allPlaces__inputBlock">
      <input class="allPlaces__input" type="number" name="amount" v-model="entrance.value" :ref="entrance.id" @blur="showLabel($event, index)">
      <label class="allPlaces__label allPlaces__label--input"
                     @click="hideLabel($event, index)">Количество мест
      </label>
     </div>
    </div>
  </div>
</div>
</template>

script>
import vueMethods from '../../mixins/methods'
import { mapState } from 'vuex'

export default {
  name: 'allPlaces',
  mixins: [vueMethods],
  data () {
    return {
      showTitle: ''
    }
  },
  mounted () {
    this.$nextTick(function () {
      window.addEventListener('resize', this.updateAllPlacesOnResize)
      this.setupAllPlaces()
    })
  },
  watch: {
    sessionId: function () {
      console.log('this.sessionId ', this.sessionId);
      // Как только создан seesionId запрашиваем колличество мест в корзине
      this.getPlacesInCart();
      let ref = this.$refs; // HERE IS MY ISSUE
      console.log(this.$refs[15129]); // UNDEFINED
    },
    places: function () {
      console.log(this.places.entrance[0].id);
    }
  },
  computed: {
    ...mapState({
      db: state => state.onload.eventData.currentDb,
      agentId: state => state.onload.eventData.currentAgent,
      eventId: state => state.onload.eventData.currentEvent,
      modals: state => state.modals,
      metric: state => state.onload.eventData.metric,
      section: state => state.onload.eventData.section,
      show: state => state.onload.eventData.show,
      event: state => state.onload.eventData.event,
      building: state => state.onload.eventData.building,
      hall: state => state.onload.eventData.hall,
      places: state => state.onload.eventData.places,
      placesSeated: state => state.onload.eventData.places.place,
      sessionId: state => state.cart.sessionId,
      ticketsInCart: state => state.cart.ticketsInCart
    })
  }
}
</script>

调用console.log(this.$refs);时得到的对象

{15129: [input.allPlaces__input]
15131: [input.allPlaces__input]
15132: [input.allPlaces__input]
15133: [input.allPlaces__input]
15137: [input.allPlaces__input]}

但是如果我打电话给console.log(this.$refs[15129]);，我会得到undefined

请告知

Answer 1

可能发生的情况是，sessionId的监视程序在places.entrance中没有任何内容之前执行。这意味着不会渲染任何带有:ref的元素，因此this.$refs为空。您可以通过添加以下内容来对此进行验证：

console.log(Object.keys(this.$refs));

在执行观察者代码时查看当前引用。

请注意documentation的这一部分：

关于裁判注册时间的重要说明：由于裁判本身是通过渲染功能创建的，因此您无法在初始渲染中访问它们-它们尚不存在！ $ refs也是无效的，因此，您不应尝试在模板中将其用于数据绑定。

VueJS //如何从外部方法更改v-for循环中的输入值？

1 个答案: