Vue UI Components Documentation

Sets or gets images count.

<template>
  <JqxRating ref="myRating"
    :count="8"
  />
</template>

 
<script>
  import JqxRating from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrating.vue';
 
  export default {
    components: {
      JqxRating
    }
  }
</script>

Sets or gets whether the rating widget is disabled.

<template>
  <JqxRating ref="myRating"
    :disabled="true"
  />
</template>

 
<script>
  import JqxRating from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrating.vue';
 
  export default {
    components: {
      JqxRating
    }
  }
</script>

Sets or gets widget's height.

<template>
  <JqxRating ref="myRating"
    :height="50"
  />
</template>

 
<script>
  import JqxRating from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrating.vue';
 
  export default {
    components: {
      JqxRating
    }
  }
</script>

Sets or gets rating item's height.

<template>
  <JqxRating ref="myRating"
    :itemHeight="30"
  />
</template>

 
<script>
  import JqxRating from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrating.vue';
 
  export default {
    components: {
      JqxRating
    }
  }
</script>

Sets or gets rating item's width.

<template>
  <JqxRating ref="myRating"
    :itemWidth="20"
  />
</template>

 
<script>
  import JqxRating from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrating.vue';
 
  export default {
    components: {
      JqxRating
    }
  }
</script>

Sets or gets vote precision.

<template>
  <JqxRating ref="myRating"
    :precision="0.5"
  />
</template>

 
<script>
  import JqxRating from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrating.vue';
 
  export default {
    components: {
      JqxRating
    }
  }
</script>

Sets or gets whether the user can vote single or multiple times.

<template>
  <JqxRating ref="myRating"
    :singleVote="true"
  />
</template>

 
<script>
  import JqxRating from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrating.vue';
 
  export default {
    components: {
      JqxRating
    }
  }
</script>

Sets or gets current rating.

<template>
  <JqxRating ref="myRating"
    :value="3"
  />
</template>

 
<script>
  import JqxRating from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrating.vue';
 
  export default {
    components: {
      JqxRating
    }
  }
</script>

Sets or gets widget's width.

<template>
  <JqxRating ref="myRating"
    :width="300"
  />
</template>

 
<script>
  import JqxRating from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrating.vue';
 
  export default {
    components: {
      JqxRating
    }
  }
</script>

The change event is triggered when the rating is changed.

Code examples

Bind to the change event of jqxRating.

<template>
  <JqxRating ref="myRating" @change="onChange($event)"
   
  />
</template>

 
<script>
  import JqxRating from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrating.vue';
 
  export default {
    components: {
      JqxRating
    },
    methods: {
      onChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Disabling the widget.

<template>
  <JqxRating ref="myRating"
   
  />
</template>

 
<script>
  import JqxRating from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrating.vue';
 
  export default {
    components: {
      JqxRating
    },
    mounted: function () {
      this.$refs.myRating.disable();
    }
  }
</script>

Enabling the widget.

<template>
  <JqxRating ref="myRating"
   
  />
</template>

 
<script>
  import JqxRating from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrating.vue';
 
  export default {
    components: {
      JqxRating
    },
    mounted: function () {
      this.$refs.myRating.enable();
    }
  }
</script>

Getting current rating value.

<template>
  <JqxRating ref="myRating"
   
  />
</template>

 
<script>
  import JqxRating from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrating.vue';
 
  export default {
    components: {
      JqxRating
    },
    mounted: function () {
      const value = this.$refs.myRating.getValue();
    }
  }
</script>

Setting value to the rating widget.

<template>
  <JqxRating ref="myRating"
   
  />
</template>

 
<script>
  import JqxRating from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrating.vue';
 
  export default {
    components: {
      JqxRating
    },
    mounted: function () {
      this.$refs.myRating.setValue(4);
    }
  }
</script>

Sets or gets the value.

<template>
  <JqxRating ref="myRating"
   
  />
</template>

 
<script>
  import JqxRating from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrating.vue';
 
  export default {
    components: {
      JqxRating
    },
    mounted: function () {
      const value = this.$refs.myRating.val();
    }
  }
</script>