Vue.js - this.$refs.key 返回一个空数组或未定义而不是元素

Question

我在 Vue 2 中有一个对话框窗口组件，它正在侦听事件 tcs-show-confirm（它与显示对话框的事件相同，将 show 属性设置为 true - 在父组件中）：

  @Prop({ default: false })
  show: boolean;

  @Prop()
  buttons: Array<TcsDialogButton>;

  mounted() {

    this.$nextTick(function () {
      TcsEventBus.$on('tcs-show-confirm', () => {
        console.log(this.$refs.tcsdialbuttons);
      });
    });
  }

组件的 html 在这里（页脚插槽的内容不会被另一个组件的 html 替换）：

  ...
  <slot name="footer">
    <div v-if="buttons && buttons.length" ref="tcsdialbuttons" v-for="(button, index) in buttons">
      <button tabindex="0" class="tcs-button tcs-dialog__button" @click="$emit('close', button.emitString)">
        {{button.text}}
      </button>              
    </div>
    <div style="clear: both;"></div>
  </slot>
  ...

问题是 console.log(this.$refs.tcsdialbuttons) 显示一个长度为 0 的空数组 []。这是为什么呢？如何访问按钮并将焦点设置在第一个按钮上？

---

我也试过把胖箭头功能改成普通功能：

      TcsEventBus.$on('tcs-show-confirm', function() {
        console.log(this.$refs.tcsdialbuttons);
      });

但现在它返回 undefined。

---

我刚刚发现我无法引用组件中的任何元素，即使它适用于我项目中的其他组件。没看懂。。

Answer 1

我强烈建议首先考虑以下两种良好做法：

• https://vuejs.github.io/eslint-plugin-vue/rules/no-use-v-if-with-v-for.html
• https://vuejs.github.io/eslint-plugin-vue/rules/require-v-for-key.html

处理完之后，我建议将index 添加到您的v-for 并将:ref 添加到各个按钮，这样您就可以在一个函数中找到它们中的每一个。

通过ref 处理数组项在这里得到了很好的描述：this.$refs[("p" + index)].focus is not a function

您应该能够使用 this.$refs[button${index}][0].focus(); 之类的方式将焦点应用于第一个按钮