In my Vue project, I am required to extract only the numerical value from a select option text and disregard the rest of the text

Currently, I am in the process of learning Vue and have taken on the task of creating a basic tax calculator. The challenge is to display the result in real-time without requiring a "show total value" button. Everything seems to be functioning well except for one issue - I have a select element where ideally, both the type of tax and the value should be visible. However, I am only able to make it work with just the value being displayed.

<select ref="taxEs" class="form-control" v-model="settings.tax" @change="saveChanges()" onfocus="this.select()"> 
        <option>tax1, 6.25%</option>
        <option>tax2, 8.90%</option>
        <option>tax3, 8.25%</option>
        <option>9.25</option>

At the moment, only the last option (9.25) is functional. My question is, how can I include the description while ensuring that Vue utilizes only the value? Your insights would be greatly appreciated.

Thank you.

javascriptvue.jsv-model

Answer №1

If you want to include values in your options, you can do so by using the following syntax:

    <option val="6.25">tax1, 6.25%</option>
    <option val="8.9">tax2, 8.90%</option>
    <option val="8.25">tax3, 8.25%</option>
    <option val="9.25">9.25</option>

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

AngularJS module is experiencing issues with loading properly

Can someone please help me understand what the issue is? I am new to AngularJS and may have overlooked something. Below is my simple HTML code: <!DOCTYPE html> <html> <script type="text/javascript" src="angular.js"></script> ...

javascriptangularjs

What is the method for executing a function enclosed within a variable?

As someone new to the world of Java, I have encountered a puzzling issue with some code related to a game. Specifically, there seems to be an obstacle when it comes to utilizing the navigator function. When I click on this function in the game, some sort o ...

javascriptajaxdebuggingfirebug

What is the connection between importing and using destructuring in ES6 syntax?

Bring in: import React, { Component } from 'react'; Unpacking: let z, { b } = {a: 1, b: 2, c: 3} Both of these examples seem to have similar syntax. However, in the second example, z will be undefined instead of {a: 1, b: 2, c: 3}. Does this ...

javascriptreactjsecmascript-6

Executing JavaScript code does not execute CSS code

Having some trouble with my Javascript and CSS. The script is functioning well, but when I use the filtering function, the CSS stops working and only the filtered results are displayed on the HTML page. Looking for advice on how to fix the Javascript. & ...

javascripthtmlcss

What is the best way to ensure that the div from the header file remains fixed directly above the fixed div from another file?

This is the header section that I want to keep fixed within the "header" div. <div id="header" style="display:block;"> <table style="width:100%"> <tr> <td class="col-sm-6" style="background-color:lavender;"><a href ...

javascriptphpjqueryhtmlcss

Tips for incorporating "are you sure you want to delete" into Reactjs

I am currently working with Reactjs and Nextjs. I have a list of blogs and the functionality to delete any blog. However, I would like to display a confirmation message before deleting each item that says "Are you sure you want to delete this item?" How ...

javascriptreactjsnext.js

Is it possible to update a MobX state when a message is received from Firebase in the background?

I've set up Firebase in my project like this: import { initializeApp } from 'firebase/app'; import { getMessaging, getToken, onMessage, isSupported } from 'firebase/messaging'; import store from './flag'; ...

javascriptreactjsfirebasefirebase-cloud-messagingmobx

What is the most efficient way to incorporate MongoDB into your codebase using ES6-style

I have encountered an issue with importing MongoDB using the es6 import-from style. When I try to import using node's require method, everything works fine. let mongo = require('mongodb'); let MongoClient = mongo.MongoClient; However, when ...

javascriptnode.jsmongodbecmascript-6systemjs

Error: An unrecognized symbol '<' was encountered while utilizing $routeparams

In my Angular application with MongoDB, Express, and Node.js, I have a list of flats and I want to add an "Edit" option for each flat. Below is a snippet from my api.js file: api.route('/flats/:id') .get(function(req, res){ Flat.findById(r ...

javascriptangularjsnode.jsmongodbexpress

Issue with Node.js: Modifications to route settings are not reflected

It's puzzling - the changes I make to my route settings in the MEAN environment, with Node v0.12.2 and express 4, don't seem to have any effect! Specifically, when I use ".sendfile()" to respond to client requests. app.get('/', functio ...

javascriptnode.js

Is it possible to develop an image that can be zoomed in and out using the mouse

$(document.createElement('img')) .width(imgW) .height(imgH) .addClass('img_full') .attr('src', $(this).attr('data-src')) .draggable() .css({ &a ...

javascriptjquery

React's setState method may not trigger a re-render

I am currently working on a personal project using React for the front-end and Node for the back-end. One part of the application involves counting the entries when a user submits an image URL, updating it on the server, and then re-rendering it on the fro ...

javascriptnode.jsreactjs

Guide to generating a PDF file and utilizing a Node.js program for the download process

Seeking assistance in creating a button using my Node.js application to generate a downloadable PDF file filled with information from a PostgreSQL database. Any help is greatly appreciated! ...

javascripthtmlnode.jspostgresql

Error Encountered: React - Material UI | Unable to locate the module: 'material-ui/Button'

Currently, I am utilizing a Material UI button in my React application page. import Button from 'material-ui/Button' <Button color="primary" variant="raised"> Group </Button> The following packages have ...

javascriptreactjsmaterial-ui

Issue with document.referrer in Firefox: Unexpected behavior

I attempted to utilize the document.referrer function. It functions correctly in Google Chrome, however it does not yield the expected results in Mozilla Firefox. if (document.referrer.indexOf('stringToCheck') > 0) { //insert code here ...

javascriptfirefox

HTML Vue CDN is functional, but the v-if condition is not executing correctly

I recently started using a CDN to incorporate Vue code into my index.html. This is my first experience working with Vue, following a tutorial to learn the ropes. Here's an excerpt from my index.html. <!DOCTYPE html> <html> <head> ...

vue.js

Guide to implementing server-side data loading in App.js using Next.js

Is there a way to fetch the layout data along with the page without adding it to every individual page? The issue I'm facing is that my layout component, loaded once on App.jsx, remains consistent throughout the session. However, due to SSRed page loa ...

javascriptnext.jsserver-side-rendering

Is there a navigation feature in VueJS that functions similarly to React Router?

I am currently working on enhancing the navigation experience of an existing vueJS application that utilizes Vue Router. When working with React, I typically structure breadcrumbs in the following manner: <Breadcrumbs> <Route path="/users&q ...

javascriptvue.js

Obtain the YouTube video identifier from a YouTube embedded link

Is there a way to extract just the YouTube ID from a given URL? https://www.youtube.com/embed/cqyziA30whE?controls=1&showinfo=0&rel=0&autoplay=0&loop=0 $(".youtube").click(function () { console.log(this.href.replace(new RegExp("em ...

javascriptjqueryhtmlregex

Is your angularjs localstorage giving you trouble?

I am encountering an issue with local storage on my webpage. Upon initial visit, I am seeing an outdated value from local storage. However, upon refreshing the page, I am able to access the current value. How can I prevent this error and ensure that I only ...

javascriptangularjslocal-storage