Uncaught TypeError：无法读取未定义Vuejs的属性'focus'

Question

我尝试在单击模态的关闭按钮后，将焦点重新设置在produc-tile组件中的按钮（打开模态）上。但是出现"focus" of undefined"错误。

我的代码设置方式是：

在单击buy ticket组件上的product-tile按钮（弹出模态）后，[1-保存按钮的ref并将其传递给模态组件。

2-在单击模态的关闭按钮后，我将引用发回product-tile组件，并尝试将焦点重新设置到按钮上。

但是重点放在地址栏。

product-tile.html：

<button @click="buyTicket('butOne')" ref="butOne" > Buy Ticket </button>
<button @click="buyTicket('butTwo')" ref="butTwo" > Buy Ticket </button>

product-tile.js：

methods: {
    data: function() {
    return {
      reference: ""
      }
    },
    focusToButton(){
      this.$nextTick(() => {
        const _this = this;
        setTimeout(function(){
          _this.$refs.reference.focus()
        },300)
      });
    },
    buyTicket(btn) {
    ... //opens modal
    this.reference= btn
    EventBus.$emit("trigger-number-picker", {
          reference: this.reference
        });
    }
},
mounted: async function() {
    await EventBus.$on("focus-setter", (focusSetter) => {
      if ( focusSetter.reference){
         this.reference = focusSetter.reference
      }
      this.focusToButton()
    })
}

modal.hmtl：

<button @click="closeModal"> CLOSE </button>

modal.js：

mounted() {
    EventBus.$on("trigger-number-picker", (playHeader) => {
      if(playHeader.reference) { this.reference = playHeader.reference; }
    })
},
methods: {
    closeModal() {
      $('#number-picker-modal').modal('hide');
      EventBus.$emit("focus-setter", {
        reference: this.reference
      })
    }
  }

**请注意：

1-如果id有效，请改用ref，但我需要使用ref

2-如果我在this.reference方法中使用console.log focusToButton()，则它起作用。但是将重点放在下一行上是行不通的。**

Answer 1

您应该通过[]访问者来访问属性：

  focusToButton(){
      this.$nextTick(() => {

        setTimeout(()=>{
          this.$refs[this.reference].focus()
        },300)
      });
    }

此问题源于没有名为ref的'reference'