Events in Vue Rating component

11 Jun 20244 minutes to read

This section describes the rating events that will be triggered when appropriate actions are performed. The following events are available in the rating component.

beforeItemRender

The rating component triggers the beforeItemRender event before rendering each rating item. The RatingItemEventArgs passed as an event argument provides the details of the item to be rendered.

<template>
    <div class='wrap'>
        <ejs-rating id="rating" :beforeItemRender="beforeItemRender"></ejs-rating>
    </div>
</template>

<script setup>

import { RatingComponent  } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);


export default {
    methods : {
        beforeItemRender: function(args: RatingItemEventArgs) {
          //Your required action here
        }
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

.wrap {
  margin: 50px auto;
  text-align: center;
}

</style>

created

The rating component triggers the created event when the rendering of the rating component is completed.

<template>
    <div class='wrap'>
        <ejs-rating id="rating" :created="created"></ejs-rating>
    </div>
</template>

<script setup>

import { RatingComponent  } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);


export default {
    methods : {
        created: function() {
          //Your required action here
        }
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

.wrap {
  margin: 50px auto;
  text-align: center;
}

</style>

onItemHover

The rating component triggers the onItemHover event when the rating item is hovered. The RatingHoverEventArgs passed as an event argument provides the details of the hovered item.

<template>
    <div class='wrap'>
        <ejs-rating id="rating" :onItemHover="onItemHover"></ejs-rating>
    </div>
</template>

<script setup>

import { RatingComponent  } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);


export default {
    methods : {
        onItemHover: function(args: RatingHoverEventArgs) {
          //Your required action here
        }
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

.wrap {
  margin: 50px auto;
  text-align: center;
}

</style>

valueChanged

The rating component triggers the valueChanged event when the value of the rating is changed. The RatingChangedEventArgs passed as an event argument provides the details when value is changed.

<template>
    <div class='wrap'>
        <ejs-rating id="rating" :valueChanged="valueChanged"></ejs-rating>
    </div>
</template>

<script setup>

import { RatingComponent  } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);


export default {
    methods : {
        valueChanged: function(args: RatingChangedEventArgs) {
          //Your required action here
        }
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

.wrap {
  margin: 50px auto;
  text-align: center;
}

</style>

Below example demonstrates the valueChanged event of the Rating component.

<template>
  <div class='wrap'>
    <ejs-rating id="rating" :valueChanged="valueChanged"></ejs-rating>
  </div>
</template>

<script setup>

import { RatingComponent as EjsRating } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

const valueChanged = (args) => {
  alert("Previous Value:" + args.previousValue + "\nValue:" + args.value);
};

</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

.wrap {
  margin: 50px auto;
  text-align: center;
}
</style>
<template>
  <div class='wrap'>
    <ejs-rating id="rating" :valueChanged="valueChanged"></ejs-rating>
  </div>
</template>

<script>

import { RatingComponent } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

export default {
  name: "App",
  components: {
    "ejs-rating": RatingComponent
  },
  methods: {
    valueChanged: function (args) {
      alert("Previous Value:" + args.previousValue + "\nValue:" + args.value);
    }
  }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

.wrap {
  margin: 50px auto;
  text-align: center;
}
</style>