vue-bootstrap 带有附加参数的表单微调按钮

Question

我想要一个 b-form-spinbutton 格式化程序函数，它依赖于我的数据，所以我想将额外的参数传递给 :formatter-fn。我正在尝试此代码，但它不起作用。

<b-form-spinbutton :formatter-fn='dividerFormatter(data.index, $event)'></b-form-spinbutton>

文档说：

'formatter-fn Function A reference to a method to format the displayed value. It is passed a single argument which is the current value'

有什么方法可以向这个函数传递额外的参数吗？

Answer 1

您可以编写一个内联函数，它接受单个参数并将其与您需要的其他参数一起传递给您的格式化程序。

<b-form-spinbutton :formatter-fn='(val) => dividerFormatter(data.index, val)'>

new Vue({
  el: '#app',
  data() {
    return {
      data: {
        index: 1,
        value: 0
      },
      days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
    }
  },
  methods: {
    dividerFormatter(index, value) {
      console.log(`Index: ${index} - Value ${value}`)
      return this.days[value]
    }
  }
})

<link href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.15.0/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.15.0/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-form-spinbutton v-model="data.value" :formatter-fn='(val) => dividerFormatter(data.index, val)' min="0" max="6">
  </b-form-spinbutton>
</div>

vue-bootstrap 带有附加参数的表单微调按钮

vue-bootstrap form-spinbutton with additional params

javascript

vue.js

vuejs2

bootstrap-vue