Home » VueJS Bar and Star Rating Component and demo

VueJS Bar and Star Rating Component and demo

VueJS Bar and Star Rating Component and demo

In this Post We Will Explain About is VueJS Bar and Star Rating Component and demo With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Vuejs rating component Example

In this post we will show you Best way to implement VueJS Bar Rating Component and demo, hear for star rating Vuejs examples free download with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Read Also:  Remove Duplicate Objects from Array Jquery Example

Include External Libs

index.html

<!-- Devloped by Pakainfo.com free download examples -->
<div id="liveApp">
    <h1>Example of the Star rating in vue.js demo</h1>
    <ul>
        <li>
            <p>{{product.name}}: {{product.level}}</p>
            
        </li>
    </ul>
    <pre>{{webdev | json}}</pre>
</div>

index.js

// Devloped by Pakainfo.com free download examples -->
Vue.component('live-star-rating', {
  props: {
    'name': String, //Datatype string
    'value': null,
    'real_val': null,
    'id': String,  //Datatype string
    'disabled': Boolean,//true or false
    'required': Boolean  //true or false
  },
  template: '<div class="live-star-rating">\
        <label class="live-star-rating__star">= rating) && value != null), \'is-hover\': ((real_val >= rating) && real_val != null), \'is-disabled\': disabled}" \
        v-on:click="set(rating)" v-on:mouseover="star_over(rating)" v-on:mouseout="star_out">\
        ★</label></div>',

  data: function() {
    return {
      temp_value: null,
      liveAllRates: [1, 2, 3, 4, 5]
    };
  },
  methods: {
    star_over: function(index) {
      var self = this;

      if (!this.disabled) {
        this.temp_value = this.real_val;
        return this.real_val = index;
      }

    },

    star_out: function() {
      var self = this;

      if (!this.disabled) {
        return this.real_val = this.temp_value;
      }
    },
	//set value
    set: function(value) {
      var self = this;
	//check value
      if (!this.disabled) {        
        this.temp_value = value;
        return this.value = value;
      }
    }
  }

});

new Vue({
  el: '#liveApp',
  data: {
  	webdev: [
    	{name: "Live24u", level: 4},
			{name: "Vuejs", level: 3}
    ]
  }
});

style.css

.live-star-rating__star.is-selected,
.live-star-rating__star.is-hover {
  color: #FFD700;
}
.live-star-rating__star.is-disabled:hover {
  cursor: default;
}
pre{
  background: #1d1d1d;
  border: 2px solid #3d3d3d;
  padding: 18px;
  border-radius: 3px;
}
.live-star-rating__star {
  display: inline-block;
  line-height: 1;
  font-size: 1.5em;
  color: #ABABAB;
  padding: 3px;
  vertical-align: middle;
  transition: color .2s ease-out;
}
.live-star-rating__checkbox {
  position: absolute;
  height: 2px;
  width: 2px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -2px;
  padding: 0;
  border: 0;
}
.live-star-rating__star:hover {
  cursor: pointer;
}

Example

Read Also:  PHP Inline Editing Table using jQuery Ajax

You are Most welcome in my youtube Channel Please subscribe my channel. and give me Feed Back.
More Details……
Angularjs Example

Example

I hope you have Got What is Vuejs rating component And how it works.I would Like to have Feed Back From My Blog(Pakainfo.com) readers.Your Valuable Feed Back,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Delete All Files from Folder with PHP
  2. Read Also:  Simple Laravel Contact Us Form With Email Example
  3. Read Also:  PHP Star Triangle Program printing Source Code
  4. Read Also:  Codeigniter 3 Get All Routes using Controller
  5. Read Also:  Simple 5 star Rating using Pure CSS
  6. Read Also:  PHP multi dimensional array sorting by a column with example
  7. Read Also:  PHP Laravel Full Text Search in MYSQL Database
  8. Read Also:  Laravel 6 insert or update multiple records
  9. Read Also:  CSS Modal Popup Box Window Plugins
  10. Read Also:  PHP Laravel Full Text Search in MYSQL Database

Leave a Comment

Your email address will not be published. Required fields are marked *