有没有大佬在vue里面写过投票功能啊

Question

想写一个投票的功能

就像这样的 不知道要怎么写 写着写着思绪就乱了

Answer 1

1. 一个投票题目就是一个组件，可以传入题干和选项的数组；
2. 在组件内部循环生成选项列表，默认选择的选项(selected)为-1，即表示暂时还没有任何的选中；
3. 点击选中后，selected>=0，则按钮变亮，变为可点击状态；
4. 点击按钮后，$emit('click', selected)，将选中的选项传给父级组件

代码没测验哈，就是这么个意思：

<template>
    <div>
        <h3>{{title}}</h3>
        <ul>
            <li :class="{current:index===selected}" v-for="(item, index) in options" :key="index"></li>
        </ul>
        <div class="btn" :class="{cur:selected>=0}" @click="handleVote">投票</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            selected: -1
        }
    },
    props: {
        title: String,
        options: Array
    },
    methods: {
        handleVote() {
            if (this.selected===-1) {
                return false;
            }
            this.$emit('onVote', this.selected)
        }
    }
}
</script>