Question

因为vue ref不确定，所以我头疼。组件结构如下所述。

如果您有上级组件，我有一个模态组件作为孩子。模态有一个未命名的广告位标签。

这是部分代码段：我们正在使用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组件，则可以看到上面的代码是输入标签的一部分，但是ref是在输入标签中指定的。

我想将焦点（）赋予此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)
  }
},

在安装的nextTick中未定义vue ref（$ refs）

0 个答案: