JavaScript function to add or subtract

I need to include additional inputs for "+ and -" 60mm and 120mm in my function. How can I achieve this without turning all of them into separate functions?

<template>
  <card class="card">
    <h2>Measurement</h2>
    <form>
      <div>
        <div class="col-md-3">
          <base-input type="number" label="Enter measurement:" v-model="measurement"></base-input>
          <base-input type="text" label="Subtract 120mm from measurement" v-model="subtracted_measurement_1"></base-input>
          <base-input type="text" label="Subtract 60mm from measurement" v-model="subtracted_measurement_2"></base-input>
          <base-input type="text" label="Original Measurement:" v-model="original_measurement"></base-input>
          <base-input type="text" label="Add 60mm to measurement" v-model="added_measurement_1"></base-input>
          <base-input type="text" label="Add 120mm to measurement" v-model="added_measurement_2"></base-input>
        </div>
      </div>
    </form>
  </card>
</template>
<script>
import Card from "./Card.vue";

export default {
  components: {
    Card
  },
  data() {
    return {
      measurement: "",
      gap: 10,
      stone: 60
    };
  },
  computed: {
    modifiedMeasurement: function() {
      var quantity = this.measurement / 60;
      return Math.round(quantity) * 60 - this.gap;
      }
  }
};
</script>
<style></style>

Answer №1

To incorporate the expression, simply use v-bind in the following manner:

v-bind:value="pillemaal - 120"
or
:value="pillemaal - 120"

It's important to note that using v-model here is not feasible since two-way binding with an expression is not supported.

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

Is there a simpler and more refined approach for handling Observables within RxJS pipelines?

Picture this: I have an observable that gives me chocolate cookies, but I only want to eat the ones without white chocolate. Since I am blind, I need to send them to a service to determine if they are white or not. However, I don't receive the answer ...

Struggling to create a BMI Calculator using JS, the result is consistently displaying as 'NaN'

Having trouble creating a BMI Calculator using JavaScript. The issue I'm facing is that the calculation always returns 'NaN'. I've tried using parseInt(), parseFloat(), and Number() but couldn't solve the problem. It seems that the ...

Vue Google Tag Manager Error: This file type requires a specific loader to be handled correctly

I have integrated "@gtm-support/vue2-gtm": "^1.0.0" in one of my Vue-2 applications, with Vue versions as below: "vue": "^2.5.2", "vue-cookies": "^1.5.4", "vue-i18n": "^8.0.0", "vue-recaptcha": "^1.1.1", "vue-router": "^3.0.1", "vue-scrollto": "^2.17.1", " ...

Troubleshooting: jQuery.load function not functioning properly within ASP.NET MVC

I'm facing an issue with my code setup. Currently, I have the following components in different files: @Html.Raw(File.ReadAllText(Server.MapPath("~/Views/Home/index.html"))) This is included in my Razor file. <li><a href="#">Personal Re ...

How can I adjust the position of a target point in the chase camera using THREE.js?

Recently, I've delved into the world of THREE.js and decided to create a game featuring a spaceship as the main element. Utilizing a chase camera for my model, I encountered a challenge where I needed to adjust the camera's position in relation t ...

"Encountering issues with Node.js while loading required modules

Having created an API utilizing hummus.js, I encountered a problem after uploading it to my server (Ubuntu Root + Plesk Onyx) and performing an npm install on my package.json. Despite receiving a "Success" status message during the installation process, my ...

Press on any two table cells to select their content, highlight it, and save their values in variables

I have a table retrieved from a database that looks like this (the number of rows may vary): |Player 1|Player 2| ------------------- |Danny |Danny | |John |John | |Mary |Mary | My goal is to select one name from each Player column and sto ...

Utilizing window.location.pathname in Next.js for precise targeting

Are you familiar with targeting window.location.pathname in NEXT.JS? I encountered a red error while using this code in Next.js const path = window.location.pathname console.log(path) // I am able to retrieve the pathname here Then { ...

When I log out and hit the back button, the PHP page continues to display without any changes

After logging out of my PHP session and being redirected to the login page, I am facing an issue where pressing the back button shows me the previous page without requiring a login. How can I fix this problem? Thank you in advance. index.php <form sty ...

Relocating sprite graphic to designated location

I am currently immersed in creating a captivating fish animation. My fish sprite is dynamically moving around the canvas, adding a sense of life to the scene. However, my next goal is to introduce food items for the fishes to feast on within the canvas. Un ...

Tips for showcasing VueX items using information obtained from an API

I am currently exploring ways to display data using VueX with a free API from rapidapi. However, I am facing a problem where I am unable to properly display or iterate through the data in the component. Although the console shows the objects correctly, th ...

Testing of AngularJS Controller using Jasmine and Karma: "Error - Unable to read property 'then' of undefined"

I am currently attempting to perform unit testing on an AngularJS controller and encountering an error message while running Karma: Cannot read property 'then' of undefined I am unsure of what I am doing incorrectly. This is my first time con ...

Each time I load the page, it displays differently depending on the browser. I'm struggling to understand the reason

Trying to figure out how to make the navigation bar close when a link is clicked and directed to a section instead of a new page. When on a large screen, I want the nav bar to remain open but automatically close when on a small screen (for example, when th ...

What is the best way to integrate ReCaptcha into a Nextjs contact form?

Currently, I am in the process of designing a portfolio website that includes a contact form for visitors to get in touch with me. I have successfully integrated SendGrid for email transfer, but my main concern now is spam. Despite my efforts to find a sol ...

Tips for ensuring all data is downloaded in Firebase (Firestore) Storage before proceeding?

I am currently developing a light dashboard in Vue that connects to Firestore and Storage. As someone who is not an expert, I have encountered a roadblock in what should be a simple task. The issue lies with a function that is meant to retrieve all URLs ba ...

Tips for receiving user input with custom values and assigning them to variables through multiple selection criteria using Jquery

I am encountering an issue with a form that contains multiple selection blocks. I am attempting to extract the values of each block criteria on click in order to send it to a database. However, every time I click on a block, my script retrieves all the val ...

Enhancing functionality in Javascript by employing prototype descriptor for adding methods

Code: Sorter.prototype.init_bubblesort = function(){ console.log(this.rect_array); this.end = this.rect_array.length; this.bubblesort(); } Sorter.prototype.init = function(array,sort_type){ this.rect_array = array; this.init_bubblesort(); } Wh ...

The grandchild of sibling A sends out a signal, prompting the parent to make necessary adjustments in the value, however sibling B

This template serves as the parent with 2 child components <payment :isEditing="isEditing" @action="onActionButtonClick" /> <create-details v-if="isCompanyDetailsCreating" @action="onActionButtonClick" /> ...

Prevent the page from automatically scrolling back to the top when a user clicks on a "read more"

When implementing the function below on an HTML page to show/hide more details about a comment, there is an issue where the page scrolls up to the top whenever the "read more" link is clicked. This can be frustrating as it takes the user away from the comm ...

React: The error message is saying that it cannot retrieve the 'handler' property because it is either undefined or null

I'm having some trouble with event handlers in my React.js project. Every time I try to create an event handler outside of the render function, I end up with an error. Can anyone help me figure out what I'm doing wrong? class CheckboxHandler ext ...