Vue.Js cant set value of input type range

user_9794044 0
Viewed 746

For the life of me I cannot figure out why I can't set the value of the input range. When it is rendered, the "value" attribute just isn't there, and the browser defaults the value to 50..

@import "~@coreui/coreui/scss/coreui";

<template>
    <div :class="'form-group ' + s_class">
        <label for="formControlRange">{{title}}</label><span style="float:right;" id="holder"><span id="value">({{ def }})</span> {{unit}}</span>
        <input type="range"  :name="input_name" :min="min" :max="max" :value="def" oninput="$(this).closest('.form-group').children('#holder').children('#value').html('('+$(this).val()+')');" class="form-control-range" :id="input_name">
        <span style="float:left">{{min}} {{unit}}</span><span style="float:right">{{max}} {{unit}}</span>
    </div>
</template>

<script>
export default {
    props: {
        min:{type: String, required:true},
        max:{type: String, required:true},
        def:{type: String, required:true},
        title:{type: String, required:true},
        input_name:{type: String, required:true},
        unit:{type: String, required:false},
        s_class:{type: String, require:false}
    }
}

</script>

Any help is appreciated, thanks!

EDIT: Thanks maxshuty, this was what I did but it still defaults the value to 50.

@import "~@coreui/coreui/scss/coreui";

<template>
    <div :class="'form-group ' + s_class">
        <label for="formControlRange">{{title}}</label><span style="float:right;" id="holder">({{value_model}}) {{unit}}</span>
        <input type="range" :name="input_name" :min="min" :max="max" v-model="value_model" class="form-control-range" :id="input_name">
        <span style="float:left">{{min}} {{unit}}</span><span style="float:right">{{max}} {{unit}}</span>
    </div>
</template>

<script>
export default {
    props: {
        min:{type: String, required:true},
        max:{type: String, required:true},
        def:{type: Number, required:true},
        title:{type: String, required:true},
        input_name:{type: String, required:true},
        unit:{type: String, required:false},
        s_class:{type: String, require:false}
    }, data: {
        value_model: 0
    }, created: function(){
        this.value_model = this.def
    }
}

</script>

Just for reference, this is how the value is being passed in so far: (In Laravel Blade)

<inputslider min="{{$input7['min']}}" max="{{$input7['max']}}" v-bind:def="{{$input7['value']}}" title="{{$input7['title']}}" input_name="{{$input7['name']}}"></inputslider>
laravel vue.js
2 Answers

You have your data values set wrong - it looks like many of them should not be String and should be Number.

Additionally I would bind it to a v-model. Finally, oninput has a bunch of jQuery it looks like that could be causing you issues. I wouldn't be mixing Vue and jQuery like that.

Here is a demo of your code (I removed all of the stuff we don't need from your post to answer this question):

var app = new Vue({
  el: '.wrapper',
   data() {
      return {
        min: 0,
        max: 100,
        def: 50
      }
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="wrapper">
  <input type="range"  :min="min" :max="max" v-model="def" />
  Current Value: <span v-text="def"></span>
</div>

Finally here is your same code working (I migrated all of your props to be data in my example so that I could set their values): 

var app = new Vue({
  el: '.wrapper',
   data() {
      return {
        value_model: 0,
        min: 0,
        max: 100,
        title: 'Your title',
        input_name: 'My input',
        unit: 'Unit',
        s_class: 's-class'
      }
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div class="wrapper">
          <label for="formControlRange">{{title}}</label><span style="float:right;" id="holder">({{value_model}}) {{unit}}</span>
        <input type="range" :name="input_name" :min="min" :max="max" v-model="value_model" class="form-control-range" :id="input_name">
        <span style="float:left">{{min}} {{unit}}</span><span style="float:right">{{max}} {{unit}}</span>
</div>

As a side note I would consider some better naming strategies for your values as things like value_model are very generic.

user_48267400

Your data is not returning a new instance when something changes in your application.

You have

data: {
        value_model: 0
    }

Which should have been

data() {
   return {
      value_model: 0
   }
}

Check this https://v3.vuejs.org/api/options-data.html#data-2
user_64366740
Related