vue ref ($ refs) не определено в смонтированном nextTick - PullRequest
Новая
       13

vue ref ($ refs) не определено в смонтированном nextTick

0 голосов
/ 10 января 2019

Из-за vue ref undefined я страдаю от головной боли. Структура компонентов описана ниже.

Если у вас есть родительский компонент, У меня есть модальный компонент в детстве. Модал имеет безымянный тег слота.

Вот фрагмент кода: Мы меняем содержимое для отображения в слоте с помощью v-if. 

<modal v-if="visibleModal" :useBody="false" :useFull="true" @close="visibleModal = false">
  <template v-if="visibleModalContentsFlag == 'first'">
    <first @close="closeModal"
           @visibleBasicInfoModal="visibleModalContentsFlag = 'basic1'"
           @visiblePickupPlaceModal="visiblePickupPlace"
           @updateBasicInfo="updateBasicInfo($event)"
           @updatePickupPlace="updatePickupPlace($event)"
           @setReq="spotReq = $event"
           @inputConfirm="visibleModalContentsFlag = 'confirm'"
    />
  </template>
  <template v-if="visibleModalContentsFlag == 'basic1'">
    <input-basic :basicInfoModel="basicInfo"
                 @back="visibleModalContentsFlag='first'"
                 @next="visibleModalContentsFlag='basic2'"/>
  </template>

  <template v-if="visibleModalContentsFlag == 'basic2'">
    <input-step-1 :basicInfoModel="basicInfo"
                  :basicInfoFocusInput="focusInput"
                  @back="visibleModalContentsFlag='basic1'"
                  @submitComplete="stepOneComplete"/>
  </template>

  <template v-if="visibleModalContentsFlag == 'pickup1'">
    <input-step-2 :pickupInfoModel="pickupInfo"
                  :pickupPlaceFocusInput="focusInput"
                  @back="visibleModalContentsFlag='first'"
                  @submitComplete="stepTwoComplete"
                  ref="inputStep2"/>
  </template>

  <template v-if="visibleModalContentsFlag == 'confirm'">
    <input-confirm :spotReq="spotReq"
                   @modifyBasicInfo="modifyBasicInfo($event)"
                   @modifyPickupPlaceInfo="modifyPickupPlaceInfo($event)"
                   @submitComplete="visibleModalContentsFlag = 'done'"/>
  </template>

  <template v-if="visibleModalContentsFlag == 'done'">
      <input-complete/>
  </template>

</modal>

<label class="row--v-center radios-block__item">
          <span class="col">
            <em>공용 냉장고</em>
          </span>
          <form-radio value="공용 냉장고" v-model="pickupInfoModel.pickup" ref="f_pickup1"/>
        </label>
        <label class="row--v-center radios-block__item">
          <span class="col">
            <em>문서 수발실</em>
          </span>
          <form-radio value="문서 수발실" v-model="pickupInfoModel.pickup" ref="f_pickup2"/>
        </label>

Если вы посмотрите здесь на компонент input-step-2, то увидите, что приведенный выше код является частью тега input, но в теге input указан ref.

Я хочу выделить focus () для этого тега ref. 

this.$nextTick(()=>{
      console.log('fuck')
      console.log(this.$refs.inputStep2.$refs)
      console.log(this.$refs.inputStep2.$refs.f_pickup_detail)
    })

Я попытался обработать, как показано ниже, но не могу продолжить из-за неопределенности. конечно, Компонент input-step-2 будет неопределенным, даже если вы попытаетесь его смонтировать. Поэтому я решил следующую проблему как временное решение, но мне это не нравится. Есть ли способ, которым я могу решить это? 

mounted(){
  if(!!this.pickupPlaceFocusInput){
    setTimeout(()=>{
      this.$refs[this.pickupPlaceFocusInput].$el.focus()
    },350)
  }
},
...