connect the input to a factor using v-model

Question

connect the input to a factor using v-model

I currently have a value that I need the user to adjust. Here's my current setup:

<input type="number" v-model="value" step="any"/>

However, the internal value is in radians while I want the user to see and input a degree value.

So, I want the displayed value (in degrees) to be synchronized bi-directionally with the internal value (in radians) using a multiplication factor. How can I achieve this in Vue.js?

In C#, I would accomplish something like this:

float internalValue;
float factor = 3.141/360;
float externalValue {get {return internalValue/factor} set {internalValue=value*factor}};

Is there a similar approach in JavaScript that will work seamlessly with the v-model binding?

javascript vue.js

Answer 1

Answer №1

Consider implementing a Computed property using get/set functionality, as outlined in the VueJS documentation.

Here is an example:

const factor = 3.141/360;

new Vue({
  el: "#app",
  data: {
    internalValue: '',
  },
  computed: {
    value: {
      get: function(){
        return this.internalValue/factor
      },
      set: function(val){
        let comp = val*factor
        this.internalValue = comp
        this.value = val
      }
    }
  }
})

#app {
  padding: 20px;
}


h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>input: </h2>
  <input type="number" v-model="value" step="any"/>
  <h3>
  ext. value: {{value}}
  </h3>
  <h3>
  int. value: {{internalValue}}
  </h3>
</div>

You can also access it on JSfiddle here

Answer 2

Consider implementing a Computed property using get/set functionality, as outlined in the VueJS documentation.

Here is an example:

const factor = 3.141/360;

new Vue({
  el: "#app",
  data: {
    internalValue: '',
  },
  computed: {
    value: {
      get: function(){
        return this.internalValue/factor
      },
      set: function(val){
        let comp = val*factor
        this.internalValue = comp
        this.value = val
      }
    }
  }
})

#app {
  padding: 20px;
}


h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>input: </h2>
  <input type="number" v-model="value" step="any"/>
  <h3>
  ext. value: {{value}}
  </h3>
  <h3>
  int. value: {{internalValue}}
  </h3>
</div>

You can also access it on JSfiddle here

Answer 3

Answer №2

After reading the response shared by @Script47, I found this answer particularly helpful: How can I create a v-model modifier for a VueJS Component?

The vue module includes the following functions:

        degToRad(d){
            return d*Math.PI/180;
        },
        radToDeg(r){
            return r/Math.PI*180;
        }

You can segment the v-model into :value and @input in the HTML, performing similar actions to getter and setter of an input field:

      <div v-for="item in items">
        <input class="val" type="number" @input="item.rotation = degToRad($event.target.value)" :value="radToDeg(item.rotation)" step="any"/>
      </div>

Answer 4

After reading the response shared by @Script47, I found this answer particularly helpful: How can I create a v-model modifier for a VueJS Component?

The vue module includes the following functions:

        degToRad(d){
            return d*Math.PI/180;
        },
        radToDeg(r){
            return r/Math.PI*180;
        }

You can segment the v-model into :value and @input in the HTML, performing similar actions to getter and setter of an input field:

      <div v-for="item in items">
        <input class="val" type="number" @input="item.rotation = degToRad($event.target.value)" :value="radToDeg(item.rotation)" step="any"/>
      </div>

connect the input to a factor using v-model

Answer №1

Answer №2

Similar questions

The interaction issue in Ionic 4 with Vue js arises when the ion-content within the ion-menu does not respond to clicks

Struggling to update the color of my SpeedDial component in MUI

Opening a modal in React Material UI from an autocomplete component results in losing focus

The TypeScript type 'Record<string, string>' cannot be directly assigned to a type of 'string'

Calculating the difference between the old scrolltop and the new scrolltop in jQuery/Javascript

Mastering the Art of Displaying Links in Columns within a Table Using ReactJS

What is the proper way to utilize a variable within the translate3d function?

"Using VueJS to allow for easy data editing directly from a table and redirect

How to use $$[n] in Spectron/WebdriverIO to target the nth child element instead of the selector

What is the best approach to modifying array elements using onChange and hooks in React?

Information gathered from checkboxes and dropdown menus

Replace the value of Undefined with an empty string

Live alerts on the AWS platform (serverless)

Changing the image's flex-grow property will take precedence over the flex settings of other child

What is the best way to set up playwright-jest so that I can skip a specific Test Suite (spec) file during execution?

Struggling to implement a vertical scroll bar in HTML code?

Tips for customizing the appearance of a Material-ui Autocomplete element

Preventing the upload of empty images in an angular application

Verify optional chaining support in Angular app for browsers

Extracting certain elements from a text: a beginner's guide