Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ppietris/vue-poll
A Vue.js component for voting
https://github.com/ppietris/vue-poll
poll vote voting vue vuejs vuejs2
Last synced: about 13 hours ago
JSON representation
A Vue.js component for voting
- Host: GitHub
- URL: https://github.com/ppietris/vue-poll
- Owner: ppietris
- Created: 2018-05-07T07:23:35.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-08-07T14:40:07.000Z (over 4 years ago)
- Last Synced: 2024-04-24T21:44:10.743Z (7 months ago)
- Topics: poll, vote, voting, vue, vuejs, vuejs2
- Language: Vue
- Homepage: https://ppietris.github.io/vue-poll/index.html
- Size: 84 KB
- Stars: 132
- Watchers: 3
- Forks: 26
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue-poll
A Twitter-like vote component, made with Vue.js 2
[DEMO](https://ppietris.github.io/vue-poll/index.html)
## Prerequisites
- [Vue.js 2](https://vuejs.org/)
## Installing
Using npm:
```bash
$ npm install vue-poll
```
Using cdn:
```html
```
### Example (NPM)
Define `vue-poll` component markup inside your custom component.
For example in your `my-poll.vue`:
```html
import VuePoll from 'vue-poll'
export default {
data() {
return {
options: {
question: 'What\'s your favourite <strong>JS</strong> framework?',
answers: [
{ value: 1, text: 'Vue', votes: 53 },
{ value: 2, text: 'React', votes: 35 },
{ value: 3, text: 'Angular', votes: 30 },
{ value: 4, text: 'Other', votes: 10 }
]
}
}
},
components: {
VuePoll
},
methods: {
addVote(obj){
console.log('You voted ' + obj.value + '!');
}
}
}
```
### Example (CDN)
```html
Vue.use(VuePoll);
new Vue({
el: '#app'
data: function() {
return {
options: {
question: 'What\'s your favourite <strong>JS</strong> framework?',
answers: [
{ value: 1, text: 'Vue', votes: 53 },
{ value: 2, text: 'React', votes: 35 },
{ value: 3, text: 'Angular', votes: 30 },
{ value: 4, text: 'Other', votes: 10 }
]
}
}
},
methods: {
addVote: function(obj){
console.log('You voted ' + obj.value + '!');
}
}
});
```
## Options
- #### question (required) (string-html)
The question of the poll.
- #### answers (required) (array)
An array of the answers of the poll.
**value (required) (integer)**
A unique value for each answer
**text (required) (string-html)**
Answer's text
**votes (required) (integer)**
Answer's votes
**selected (required when multiple is true) (boolean)**
Selected state of the answer
**custom_class (optional) (string)**
Custom css class for the answer element
- #### showResults (optional) (boolean) (default: false)
Set this to true to skip the voting and show the results of the poll
- #### finalResults (optional) (boolean) (default: false)
Set this to true to skip the voting and show the results of the poll. Winner will be highlighted
- #### multiple (optional) (boolean) (default: false)
Set this to true for multiple voting
- #### submitButtonText (optional) (string) (default: Submit)
Text of the multiple voting submit button
- #### customId (optional) (number)
A custom id that will be returned on the addvote method
## Methods
- #### addvote (returns object)
Callback on add vote. It returns an object that includes: answer's value, answer's votes, total poll's votes and the custom id
## License
MIT license