In Vue.js, the v-model connects a value that can be easily changed to a different value

Question

In Vue.js, the v-model connects a value that can be easily changed to a different value

I just connected the second input box to v-model of changedPrice.c1

Currently, it is set to display roundFee as $5000. However, the second input box allows for new input numbers.

In this scenario, I am unsure which method to use. Should I go with computed? or @change? Can someone please provide me with a comprehensive answer? Thank you in advance to anyone who can assist me.

script

data() {
    return {
         roundFee : 5000,
         changedPrice: {
             c1: 0,
             c2: 0,
         }
     }
 }

vue.js

 <input type="text" class="form-control" disabled v-model="roundFee"> $
 <input type="text" class="form-control" v-model="changedPrice.c1"> $

javascript vue.js

Answer 1

Answer №1

To utilize a computed setter, you can follow this example:

data() {
    return {
         roundFee : 5000,
         changedPrice: {
             c1: 0,
             c2: 0,
         }
     },
     computed: {
         secondInput: {
             get() {
                 return this.roundFee;
             },
             set(newValue) {
                 this.changedPrice.c1 = newValue;
             }
         }
     }
 }

Afterwards, connect the computed property secondInput to your input

<input type="text" class="form-control" disabled v-model="roundFee"> $ 
<input type="text" class="form-control" v-model="secondInput"> $

Answer 2

To utilize a computed setter, you can follow this example:

data() {
    return {
         roundFee : 5000,
         changedPrice: {
             c1: 0,
             c2: 0,
         }
     },
     computed: {
         secondInput: {
             get() {
                 return this.roundFee;
             },
             set(newValue) {
                 this.changedPrice.c1 = newValue;
             }
         }
     }
 }

Afterwards, connect the computed property secondInput to your input

<input type="text" class="form-control" disabled v-model="roundFee"> $ 
<input type="text" class="form-control" v-model="secondInput"> $

In Vue.js, the v-model connects a value that can be easily changed to a different value

Answer №1

Similar questions

Is there a way to choose multiple dropdown items that share the same header?

`Count the number of rows needed to accommodate text line breaks within a div element`

Converting JSON data into GeoJSON format using JavaScript

JavaScript Tip: How to Capture the Enter Key without Using a JavaScript Framework

Create a website specifically designed to showcase the functionality and capabilities of an API

Utilize AJAX to insert information into a MySQL database when a checkbox is selected

Having trouble with Three JS shadows not displaying correctly?

Issues with Angular Component not detecting changes in @Input array

What are some solutions for resolving a background image that fails to load?

How can I use Angular to add ng-class to a parent element when a checkbox is selected?

Check the presence of a specific cell within an array of cells

Combining D3 and D3plus in an Angular web application: A complete guide

The problem arises when using `$state.go` as it does not properly transfer the value to `$stateParams`

Performing a Jquery ajax post to an MVC2 action

Can you provide guidance on how to showcase a list?

How can I create a textbox in vue.js that only allows numeric input?

Unable to install Vue/CLI on Ubuntu 20.04 due to permission denial

Progress bar in Angular that displays during all asynchronous operations in ngOnInit

Images are not appearing on Github pages

"Customize the look of the action button in Material-UI's