Update the value shown in a v-slider and v-text-field depending on the selection made in a v-select dropdown

Question

Update the value shown in a v-slider and v-text-field depending on the selection made in a v-select dropdown

I am facing a rather intriguing problem that I can't quite figure out.

Within a form, I have multiple <v-slider>s and <v-text-field>s. Each attribute of an object has a slider and text field using it as their v-models in the following way:

<v-slider v-model='object1.value'></v-slider>
<v-text-field v-model='object1.value'></v-text-field>

The issue is that these fields retrieve values from the Database in seconds, which can be cumbersome for users when entering values that could be more easily represented as hours or minutes. I have a <v-select> dropdown that allows the user to choose between hours or minutes, but I'm struggling to change the value displayed on the sliders and text fields accordingly.

For example:

The slider value is 3600 (in seconds).
User selects hours from the dropdown.
3600 should then change to 1.

I've attempted setting a watcher on the dropdown change, but I keep getting NaN when trying to manipulate the values provided.

Does anyone have any ideas on how to solve this?

EDIT: CodePen

EDIT 2: It appears that a computed property might be what I need, but I'm struggling to make it work. I might just move these values bound to my inputs to other variables and reassign them upon form submission.

javascript vue.js vuetify.js

Answer 1

Answer №1

If you want to adjust the original value based on the selected time unit, one way to do it is by using a computed property. To implement this in your code, make the following changes:

Inside the select element, include the number of seconds for each time unit as the value - this will act as your conversion factor

<v-select 
  :items=[
    {text: 'Seconds', value: 1},
    {text: 'Minutes', value: 60},
    {text: 'Hours', value: 3600}
  ]" 
  v-model="conversionFactor"
/>

The computed property should divide by the conversion factor when getting the value and multiply by the factor when setting the value:

computed: {
  convertedValue: {
    get: function() {
      return this.exObj.value / this.conversionFactor
    },
    set: function(newValue) {
      this.exObj.value = newValue * this.conversionFactor
    }
  }
}

Additionally, you can adjust the maximum value of the slider based on the selected conversion:

<v-slider 
  v-model="convertedValue" thumb-label
  :max='9999 / conversionFactor'
  :min='0' 
/>

Check out this working example on CodePen.

Answer 2

If you want to adjust the original value based on the selected time unit, one way to do it is by using a computed property. To implement this in your code, make the following changes:

Inside the select element, include the number of seconds for each time unit as the value - this will act as your conversion factor

<v-select 
  :items=[
    {text: 'Seconds', value: 1},
    {text: 'Minutes', value: 60},
    {text: 'Hours', value: 3600}
  ]" 
  v-model="conversionFactor"
/>

The computed property should divide by the conversion factor when getting the value and multiply by the factor when setting the value:

computed: {
  convertedValue: {
    get: function() {
      return this.exObj.value / this.conversionFactor
    },
    set: function(newValue) {
      this.exObj.value = newValue * this.conversionFactor
    }
  }
}

Additionally, you can adjust the maximum value of the slider based on the selected conversion:

<v-slider 
  v-model="convertedValue" thumb-label
  :max='9999 / conversionFactor'
  :min='0' 
/>

Check out this working example on CodePen.

Update the value shown in a v-slider and v-text-field depending on the selection made in a v-select dropdown

Answer №1

Similar questions

Allowing ng-click to launch a webpage in a new browser tab

Encountering an issue when trying to submit a post request: "Received an API resolution without a response for /api/comments, which could lead to delayed requests."

What is the best way to ensure that circles only touch each other by their edges?

Incorporating unique numbers in the map reduce process

Just encountered an issue stating "PrismaClient cannot run in the browser" while working with [Next.js]

Firefoxe's slideToggle function adds an additional space

Interacting with Django and Python using AJAX POST method

Is there a way to dynamically update a game's highscore from a database without having to refresh the page?

Which function is triggered first - onclick or ng-click?

Using document.write, adding elements to an Array with Array.push, and concatenating

Utilizing For Loop to Integrate TextGeometry in THREE.js

Executing a SQL query with multiple WHERE clauses by assigning values in one command

Guide on presenting an image retrieved from a database with ajax

Only implement $(document).on(...) for every JQuery request

Guide on accessing and using the value of a specific key in an Object within an if statement using JavaScript

JavaScript: Adjust DIV Width Based on Window Height

Angular service to display an array of data

Ways to resolve incorrect URL that interfere with date search results

Difficulty in Verifying ECDSA Signatures Across React and Python Environments

Best practice for detecting external modifications to an ngModel within a directive