带有附加参数的 vue-bootstrap form-spinbutton答案

【问题标题】：vue-bootstrap form-spinbutton with additional params带有附加参数的 vue-bootstrap form-spinbutton
【发布时间】：2020-07-07 12:39:20
【问题描述】：

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

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

文档说：

'formatter-fn Function 对格式化显示的方法的引用价值。它被传递一个 single 参数，它是当前值'

有没有办法给这个函数传递额外的参数？

【问题讨论】：

标签： javascript vue.js vuejs2 bootstrap-vue

【解决方案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>

【讨论】：