Vuejs2 VueJS 2/Bootstrap 4-防止从Bootstrap 4'；s数据切换事件

使用VueJS2和Bootstrap 4，我创建了一个自定义指令，以与Bootstrap 4单选按钮组发生的更改进行交互。问题是，当您更新Bootstrap4的数据时，元素组件会被聚焦，如果页面很小，这也没关系。但是如果页面很长并且可以滚动，这将成为一种负担

以下代码是根据以下示例复制和修改的：

问题是，如果我在页面下面的某个地方有bootstrap 4单选按钮组，并且我有一个用户设置了某种类型的输入数据来自动更改单选按钮的数据，这会触发指令中的按钮（“切换”）（使用插入或更新挂钩），重点是元素，在html页面中进行了一次大跳跃。用户必须向上滚动才能继续他们离开的地方

上面的单选按钮与更改的数据交互的方式由计算属性决定：

computedProperty: {
    oType: {
        get: function () {
            return this.oType;
        },
        set: function (value) {
            this.oType = value
        }
    }
}

---

那么，如何防止焦点出现在元素上呢？

因此我将问题追溯到bootstrap.js，在触发数据切换期间，它导致了问题的发生。所以在radio.js中，我切换了这一行：

$("input[name='" + radioGrpName + "'][value='" + binding.value + "']").closest('.btn').button('toggle');

并模仿其外观和感觉：

$(el).children('.btn').removeClass('active');
$("input[name='" + radioGrpName + "'][value='" + binding.value + "']").closest('.btn').addClass('active');
$("input[name='" + radioGrpName + "'][value='" + binding.value + "']").prop('checked', true);

---

如果您能够在codesandbox/JSFIDDel上添加一个代码，那么帮助您会容易得多。您是对的，但是我也很难设置。我花了一个小时试图把所有的资源都设置好，但它在JSFIDLE上并没有完全起作用。我一直追踪到bootstrap.js。。所以我不得不替换这个功能。Boostrap v4.3调用focus（），甚至在调用.button（'toggle'）时触发一个更改事件；Bootstrap v5似乎有这些副作用。

$("input[name='" + radioGrpName + "'][value='" + binding.value + "']").closest('.btn').button('toggle');

$(el).children('.btn').removeClass('active');
$("input[name='" + radioGrpName + "'][value='" + binding.value + "']").closest('.btn').addClass('active');
$("input[name='" + radioGrpName + "'][value='" + binding.value + "']").prop('checked', true);