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

Interactive Autocomplete Component

I am encountering issues with passing dynamic data to my autocomplete angularjs directive, which is built using jQuery-UI autocomplete. Below is the current code I am working with: HTML: <div ng-app="peopleApp"> <div ng-controller="indexCont ...

javascriptjqueryangularjsjquery-uiautocomplete

What is the best way to manipulate the canvas "camera" in HTML?

I am currently developing a 3D game that involves navigating through skyboxes. My goal is to have the camera respond to user input, specifically detecting key presses (using WASD controls) to move the camera accordingly. Do you have any suggestions on how ...

javascripthtmlcsshtml5-canvas

Submitting a form using Ajax that was generated with the help of jQuery

Using a table with various rows, each row has an edit button. Upon clicking the edit button, a form is generated using ajax/json to populate the form data based on the selected row. An issue arises when setting up the ajax for this form. Although the met ...

javascriptjqueryajaxjson

Edit the contents within HTML strings without altering the HTML structure

If I have a string of HTML, it might look something like this... <h2>Header</h2><p>all the <span class="bright">content</span> here</p> I am interested in manipulating the string by reversing all the words. For example ...

phpjavascripthtmlstring

Using Array Data Binding in SAPUI5 for Lists

I am looking to connect a list along with its content to a model. var listItem = new sap.m.StandardListItem({ title: "{carDataModel>/cars/1/carId}", }); var list = new sap.m.List("carList", { }); list.bindItems('carDataM ...

javascriptjsonsapui5

The 'string' Type in Typescript cannot be assigned to the specified type

Within the fruit.ts file, I've defined a custom type called Fruit which includes options like "Orange", "Apple", and "Banana" export type Fruit = "Orange" | "Apple" | "Banana" Now, in another TypeScript file, I am importing fruit.ts and trying to as ...

javascripttypescript

Ensuring Code Execution Order in NODE.JS

I've encountered an issue with my code that involves parsing a pcap file, storing the data in an array data = [], and then writing it to a JSON file: var fs = require("fs"); var pcapp = require('pcap-parser'); var hex = ""; var data = []; v ...

javascriptnode.js

Please send the element that is specifically activated by the onClick function

This is the HTML code I am working with: <li class="custom-bottom-list"> <a onClick="upvote(this)"><i class="fa fa-thumbs-o-up"></i><span>upvote</span></a> </li> Here is my JavaScript function for Upvot ...

javascriptphpjqueryhtml

Ways to create distance between repeated cards in a loop. My method involves utilizing ajax, jquery, and bootstrap

view image description here What is the best way to create some space between these closely aligned cards? .done((todos) => { todos.forEach(el => { console.log(el) $("#todo-list").append(` <d ...

javascriptjquerynode.jsajaxbootstrap-4

Combine two objects while keeping only specific properties

Currently facing a challenge with merging two objects in the desired way using Node.js express and MongoDB. Here are the initial objects: Obj1: { "name":"max", "age":26, "hometown": & ...

javascriptnode.jsmongodbexpressmongodb-query

Employ the find() function to ascertain the result of a condition

I'm struggling to grasp how to utilize the find() method in a conditional statement. In simple terms, I want the conditional to evaluate as true if the value of item.label is equal to the value of e.target.value. if (this.props.Items.find(item => ...

javascriptreactjs

Authentication failed due to Bcrypt.compare() returning invalid credentials

const express = require('express'); const router = express.Router(); const auth = require('../../middleware/auth'); const bcrypt = require('bcryptjs'); const jwt = require('jsonwebtoken'); const config = require(&apo ...

javascriptnode.jsmongoosebcrypt

Store the content of an HTML div using HTML5 Drag and Drop functionality in a MYSQL database

Here's a simple scenario: I have 3 small divs (1, 2, 3) and I want to place them inside 3 other divs (4, 5, 6). That's no issue, but then I need to store the data in MySQL, such as 4-1, 5-2, 6-3 for instance. I can use JavaScript to display the n ...

javascriptphpmysqlhtmldrag-and-drop

Leverage the power of React by utilizing SVGR to easily integrate SVG files

Wondering if there's a way to bring in an SVG file from my public folder and use it as a React component like this: import { ReactComponent as MySvg } from '/assets/svg/mysvg.svg'; const MyComponent = () => { return ( <div> ...

javascriptreactjssvgsvg-react-loader

Transforming the text to be "unreadable"

I find myself in a rather odd predicament where I must display my name and contact details on a webpage. Although I am comfortable with sharing this information, I would prefer that it remain unreadable to robots or other unauthorized sources. Essentially ...

javascripthtmlcssweb

"Using axios and async/await in VUE.JS to perform multiple asynchronous GET

Perhaps this is a somewhat basic inquiry, as I am still learning the ropes of vue.js and javascript. Please bear with me if my question is not well-articulated or if the solution is straightforward... I am facing an issue where I need to retrieve data from ...

javascriptapivue.jsaxios

Troubleshoot: Issue with Navbar Dropdown Expansion on Bootstrap Sass 3.3.6 with JavaScript

Beginner: Bootstrap Sass 3.3.6 - Incorporating Javascript - Issue with Navbar Dropdown Not Expanding application.html.erb Head: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> ...

javascriptcssruby-on-railstwitter-bootstrapsass

Difficulty with CasperJS multi-select functionality

I am currently attempting to utilize CasperJS for choosing both options in a multiple select within an HTML form: <select id="bldgs" name="bldgs" multiple="multiple" size="6" autocomplete="off"> <option value="249759290">Southeast Financia ...

javascriptformshtml-selectcasperjsmulti-select

Why is jQuery not defined in Browserify?

Dealing with this manually is becoming quite a hassle! I imported bootstrap dropdown.js and at the end of the function, there's }($); Within my shim, I specified jquery as a dependency 'bootstrap': { "exports": 'bootstrap', ...

javascriptjquerytwitter-bootstrapbrowserify

When I attempt to conceal the filter within mat-table using *ngIf, I encounter an issue where I am unable to read the property 'value' due to it being

After creating a mat-table, I encountered an issue when trying to show and hide my input filter area using a button. If I use *ngIf="showInputFilter" to hide the filter area, I receive the error message Cannot read property 'value' of u ...

javascriptangulartypescriptangular-ng-if