vue/bootstrap-vue 更新后 $refs 不再注册

Question

我在我的 laravel 项目中更新了 bootstrap-vue 并注意到之前可用的功能现在已损坏。代码保持不变，所以这是我唯一能想到的。

我目前在 vue@2.5.16 和 bootstrap-vue@2.17.3

问题在于其中一个 $refs 未注册。

项目比较老，我不是原作者。我对vue也比较陌生，所以不知道从最初写这段代码到vue和bootstrap-vue发生了什么变化

问题出在包装输入的组件上。

<b-container class="bv-example-row persons-second-part">
    <b-row class="">
        <b-col class="person" sm="2" v-for="(person, index) in persons" @click.prevent="doubleClick(person, index)" :key="index">
            <div v-show="person.deleted === false">
                <div v-show="(currentState === 2 || currentState === 3)" v-dragged="onDragged" :id="getId(index)" style="z-index: 999" class="jag-i-centrum-label-upper-left drag-me" v-text="person.name">
                </div>
            </div>
            <b-popover :target="getId(index)" triggers="focus" placement="top">
                <input v-model="person.comment" ref="popoverInput" placeholder="Skriv beskrivning">
            </b-popover>
        </b-col>
    </b-row>
</b-container>

相关函数如下

methods: {
    doubleClick(person, index) {
      this.clicks++;
      setTimeout(() => {
        if (this.clicks == 2) this.openPopup(person, index);
        this.clicks = 0;
      }, 200);
    },

    openPopup(person, index) {
      person.showContainer = !person.showContainer;
      let that = this;
      setTimeout(function() {
        that.$root.$emit("bv::show::popover", "popover-" + index);
        const ref = that.getId(index);
        that.$refs.popoverInput[index].focus();
      }, 50);
    },

正在注册文件中的其他引用。我假设这不是因为在创建 $refs 时输入元素还没有添加到 DOM 中。我这个假设正确吗？

为什么它以前有效？我如何让它再次工作？我很乐意提供更多详细信息和代码

Answer 1

弹出窗口和工具提示在 2.0.0 版本中已完成 re-written，如果这是一个从 rc-* 版本升级的项目，这可能就是它停止工作的原因。

您似乎在打开弹出窗口后使用 ref 来聚焦输入。

<b-form-input> 支持一个 autofocus 属性，它在安装组件时聚焦输入。因为 <b-popover> 是 lazy 它只会在显示弹出窗口时安装。

<b-popover :target="getId(index)" triggers="focus" placement="top">
  <b-form-input v-model="person.comment" autofocus placeholder="Skriv beskrivning">
</b-popover>

Answer 2

问题不在于代码，而在于环境

npm install vue@2.6 npm install vue-template-compiler@2.6

然后所有原始代码再次工作。

我确实从使用 setTimeout() 更改为 Vue.nextTick，因为我觉得这是比等待任意时间更好的解决方案。

openPopup(person, index) {
      person.showContainer = !person.showContainer;
      let that = this;
      Vue.nextTick()
      .then(function () {
        const ref = that.getId(index);
        that.$root.$emit("bv::show::popover", ref);
        that.$refs.popoverInput[index].focus();
      })  
    },

vue/bootstrap-vue 更新后 $refs 不再注册

$refs no longer registering after vue/bootstrap-vue update

popover

twitter-bootstrap

vue.js

bootstrap-vue