Vue-bootstrap spinbutton form with customizable parameters

I am in need of a custom formatter function for the b-form-spinbutton component that depends on my data. I want to pass an extra argument to the :formatter-fn property in the code snippet below, but it is not working as expected.

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

According to the documentation:

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

Is there a way to pass additional parameters to this function?

javascriptvue.jsvuejs2bootstrap-vue

Answer №1

If you create an inline function that accepts a single argument and then passes it to your formatter along with any additional parameters required.

<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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5d7dadac1c6c1c7d4c5f5819b809b85">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e7c71716a6d6a6a64">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfada0a0bbbcbbbdaebfe2bfc0cbcfd29bd38fb0a3bba799cee16796bafdfefaaf9">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Iterate through a nested array in JavaScript and extract specific properties by comparing them to another array

Within my code, there is a kids object structured as follows: const kids = { name: 'john', extra: { city: 'London', hobbies: [ { id: 'football', team: &apos ...

javascriptarraysjsonecmascript-6mapreduce

Error: TypeScript Knockout table failing to display data

I have a table that displays invoices, along with a nested table showing the individual checks associated with each invoice. I am using knockout and typescript to render these tables. Currently, I can successfully display the invoices but am facing difficu ...

javascripttypescriptknockout.js

How to download an Excel file (xlsx) using AngularJS and WebApi

I am currently working on a project that requires me to download a report in xlsx format. Despite successfully generating the report file on the server and receiving it on the client side, I am facing an issue where the file is not opening and is resulting ...

javascriptc#angularjsexcelasp.net-web-api

Assistance needed for disabled JavaScript

I'm currently working on a small application where I need to display some text wrapped in 3 divs. The goal is to only show one div at a time and provide users with prev and next buttons to switch between them. However, when JavaScript is disabled, I w ...

javascripthtmlcss

Problem encountered while trying to import npm module in React Native

Working on developing an android app and currently in the process of importing the spotify-web-api-node module. In my index.android.js file, I have added the following line: import SpotifyWebApi from 'spotify-web-api-node'; However, when I try ...

javascriptandroidnode.jsreact-native

Incorporate new class into preexisting modules from external library

I am currently working on expanding Phaser by incorporating a new module called Phaser.Physics.Box2D. While Phaser already utilizes this module internally, it is an additional plugin and I am determined to create my own version. TypeScript is the language ...

javascripttypescriptphaser-framework

What is the best way to send a JSON object in Vue.js?

<template> <div id="app"> <div id="bee-plugin-container"></div> </div> </template> <script> // import axios from "axios"; // import Bee from "@mailupinc/bee-plugin"; import $ from 'jquery' ...

javascriptjqueryjsonvue.jsaxios

Is there a way to have incoming messages automatically align to the left or right based on the sender, without using the float property?

I am currently working on a webpage where I want the messages sent by different users to appear in a yellow conversation window based on who sent them - user 1 or user 2. I want it to mimic the messaging layout commonly seen on phones, distinguishing betwe ...

javascripthtmlcss

Function is raising an error with the wrong value or text

I am currently testing a form that I am in the process of developing. My goal is to have different values returned each time I click on a different item from the dropdown menu. If this explanation isn't clear, please take a quick look at my pen for cl ...

javascriptjqueryhtmlcss

error message: The file you are trying to access does not exist due to the

I seem to be facing an issue with my package.json file. I am trying to include a new "command" in a correctly written package. Specifically, I am looking to add a command that will load test data, so I updated the scripts section as follows: "load-test-da ...

javascriptnode.jsnpmpackage.json

Tips on causing JavaScript execution to halt until an element has finished rendering

test.view.js timeDBox = new sap.ui.commons.DropdownBox({layoutData: new sap.ui.layout.GridData({linebreak: true}), change: function(oEvent){ oController.getKeyEqChart(); }, }), new sap ...

javascriptjqueryhtmlajaxsapui5

Tips on getting the dropdown value to show up on the header when it changes using Angular 2 and TypeScript

I need assistance with creating a dropdown field in Angular2. When the user selects "car", I want it to display beside the heading. Can anyone provide guidance on how to achieve this? HTML: <h1>Heading <span *ngFor= "let apps of apps">({{apps ...

javascriptangulartypescript

Generate an array from a string where certain words are substituted with objects featuring the correct formatting styles

Can someone help me with this code challenge? I have a specific string: const str = 'The world is full of various colors. For example: red, green, blue.'; In my dictionary, I have words and their corresponding styles. const styles = { RED: ...

javascriptreactjsnext.js

Asynchronous operations and recursive functions in the world of Node.js

When working with express and mongoose, I frequently find myself needing to perform batch operations on collections. However, the typical approach involves callbacks in nodejs concurrency coding, which can be cumbersome. // given a collection C var i = 0 ...

javascriptnode.jsmongodbexpressmongoose

Misunderstanding the Variable Scope Concept in Node.js

I am struggling to comprehend why the return of an array from another function is confined to only one block of code. For example: exports.join = function(req, res){ User.findById(req.user._id, function(err, user) { var dupe = []; //placeholder arr ...

javascriptarraysnode.jsloopspromise

Error: The provided `anchorEl` property for this component is invalid

While working on my React 18.2 app with MUI 5.10.5, I encountered an issue trying to create a <Menu /> element that should open when a button is clicked. The menu does appear, but the positioning seems off as it displays in the top-left corner of the ...

javascriptreactjsmaterial-ui

JavaScript: Changing the names of all object keys

As a beginner, I am struggling to rename some objects in my key using a map function. Below is my current array: "platforms": [ { "id": 6, "name": "PC (Microsoft Windows)" }, { "id": 11, "na ...

javascriptarraysreactjsdatabase

Incorporating and retrieving JSON data saved within vuex storage

I am working with a vuex store to add JSON data in the following format: [ { "id":1, "firstname": "toto", "lastname": "titi" }, { "id":2, "firstn ...

vue.jsvuex

When working with React Native, encountering an issue where passing props using the Map function results in an error stating "undefined is not a function" near the section of code involving the

Hey there! I'm currently facing an issue with fetching data from my Sanity CMS and passing it as props to a child component. Interestingly, the same code worked perfectly on another screen, but here I seem to be encountering an error. Although the dat ...

javascriptreactjsreact-nativereact-hooksgraphql

Issue: The hydration process has failed due to a discrepancy between the initial UI and the server-rendered content when utilizing the Link element

Exploring Next.js, I stumbled upon the <Link/> component for page navigation. However, as I utilize the react-bootstrap library for my navbar, it offers a similar functionality with Nav.Link. Should I stick to using just Link or switch to Nav.Link? ...

javascriptreactjsnext.jsreact-bootstrap