Question

我尝试将一个名为touchSpin的引导插件添加到我的某个组件中，但它不起作用。

代码

new Vue({
    el: '#app',
  components: {
    'my-component': myComponent,'card':card
  },
  mounted(){
    $('.commission').TouchSpin({
                min: 0,
                max: 2,
                step: 0.0001,
                decimals: 4,
                boostat: 5,
                maxboostedstep: 10,
                buttondown_class: 'btn btn-white',
                buttonup_class: 'btn btn-white'
            });
  }
});

这是显示问题的小提琴。

JSFIDDLE

Answer 1

首先，你使用Vue 2 。

我升级你的小提琴使用Vue 2并修复剩余的问题。

您的代码在安装Vue时调用TouchSpin初始化，但现在还为时过早：back组件直到稍后才安装到DOM。我将其添加到back组件并修改back以使用指向佣金输入的ref。

Vue.component('back',{
 template:`#back-template`,
  mounted(){
    $(this.$refs.commission).TouchSpin({
      min: 0,
      max: 2,
      step: 0.0001,
      decimals: 4,
      boostat: 5,
      maxboostedstep: 10,
      buttondown_class: 'btn btn-white',
      buttonup_class: 'btn btn-white'
    });
  }
})

这样，每当安装back组件时，都会使用TouchSpin对其进行初始化。

这是您更新的fiddle。

Bootstrap插件不适用于Vue2

1 个答案: