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:  PHP Laravel 6 Global Variable 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:  Create Contact Form Sending Email via SMTP PHPMailer

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:  php foreach multidimensional array Example
  2. Read Also:  laravel excel import Export to Database Example
  3. Read Also:  Simple 5 star Rating using Pure CSS
  4. Read Also:  How to integrate CardConnect payment Gateway with Node JS
  5. Read Also:  MySQL Remove special characters from database
  6. Read Also:  PHP Get Full URL PATH QUERY STRING
  7. Read Also:  jQuery AJAX Multiple Files Upload using PHP
  8. Read Also:  Advanced jQuery Ajax Pagination PHP MySQL using jQuery
  9. Read Also:  How to fix Class 'App\Http\Controllers\Auth' not found
  10. Read Also:  How to fix Class 'App\Http\Controllers\Auth' not found
CLOSEX