My perspective is as follows :
<div class="col-md-8">
...
<star-rating :value="3"></star-rating>
...
</div>
This is how my star-rating component looks like :
<template>
<span class="rating">
<template v-for="item in items">
<label class="radio-inline input-star">
<input type="radio" class="input-rating" name="input-rating" v-bind:value="item.value" @click="rate(item.value)">
</label>
</template>
</span>
</template>
<script>
export default{
data(){
return{
items: [
{value: 5},
{value: 4},
{value: 3},
{value: 2},
{value: 1}
]
}
},
methods:{
rate: function (star) {
this.$http.post(window.BaseUrl + '/star', {star: star}).then(function (response) {
console.log('submitted');
});
},
}
}
</script>
Upon execution, I would like the system to display a star rating of 3 initially and update it on click.
I am still grappling with utilizing vue.js
What steps should I take?