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

Preventing duplication of code execution in recycled PHP elements

How to handle an unexpected keyword 'true' error when using the `useState` hook in React?

What could be causing this JavaScript if statement to consistently evaluate to true?

Having difficulty loading the JSON configuration file with nconf

Having trouble with the jQuery select2 AJAX functionality?

unexpected issue when trying to append a child element after creating its innerHTML

res.send() triggers an error of TypeError: Attempting to convert circular structure to JSON

Ways to conceal a button using Javascript

Gradually fade with JavaScript

Filtering with AngularJS based on integer comparison will assist in stream

Insert a 5-second delay in the JavaScript code before triggering the click event on the next button

Is there a way to retrieve the request object within loopback operational hooks?

Challenges encountered with input outcomes

When a form input is submitted, the webpage will refresh with a new

When using NextJS with Redux Persist, the HTML does not get rendered in the initial server

Issues with Angular's http get functionality not functioning as expected

What is the approach for utilizing Vue List Rendering with v-if to verify the presence of items within an array?

Issue with Vuex getter not reflecting correct value after modifying an array

Running of code in <script> tag

What's causing the "* before initialization" error in Vue with TypeScript?