Vue rating
Take a look at this example in CodeSandbox: working example
Rating component
<template> <div ref="rating"></div> </template> <script> import jSuites from "jsuites"; import "jsuites/dist/jsuites.css"; export default { name: "Rating", props: { properties: Object, }, mounted: function () { jSuites.rating(this.$refs.rating, this.$props.properties); }, }; </script>
Component usage
<template> <div id="app"> <h3>Vue rating example</h3> <Rating v-bind:properties="{ value: value, number: 10, tooltip: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], onchange: handleRatingChange, }" /> <h3>New value is: {{ value }}</h3> </div> </template> <script> import Rating from "./components/Rating"; export default { name: "App", components: { Rating, }, data: function () { return { value: 0, }; }, methods: { setValue: function (newValue) { this.value = newValue; }, handleRatingChange: function (el, newValue) { this.setValue(newValue); }, }, }; </script>