时间戳

首页 > 解决方案 > vue/bootstrap-vue 更新后 $refs 不再注册

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

问题描述

我在我的 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。我这个假设正确吗？

为什么之前有效？我怎样才能让它再次工作？我很乐意提供更多详细信息和代码

标签： twitter-bootstrapvue.jspopoverbootstrap-vue

解决方案

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

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

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

我确实从使用 a 更改为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();
      })  
    },

推荐阅读