Question

我是Vue的新手，我正在努力创建一个组件，用户必须在4个语句中划分10个点。它看起来像这样：

如果用户点击一个圈子，它将填充并向计数器添加+1。问题是计数器都是链接的。我的问题是：我如何为每个陈述单独/独立的计数器？

qa中的数据包含json中的4个语句，其中包含视图属性，我稍后需要绑定到通过prop传递给组件的输入。

这是我的代码：

<template>
<div class="counter">
    <span>Je mag nog {{ total.counter }} punten verdelen</span>
    <div class="row" v-for="n in qa[0]">
        <div class="col s4">   
            <h5>{{ n['title'] }}</h5>
        </div>
        <div class="col s7">
            <span v-for="n in fullCounter"><img v-on:click="subtractCounter" class="circle-image" src="/images/solid-circle.png"></span>
            <span v-for="n in emptyCounter"><img v-on:click="addCounter" class="circle-image" src="/images/empty-circle.png"></span>
        </div>
        <div class="col s1">
            <input v-model="fullCounter" type="number" min=0 max=10>
        </div>
    </div>
</div>
</template>

<script>
let total = {
    counter: 10
}
export default {
    props: ['qa'],
    data() {
        return {
                total,
                fullCounter: 0,
                emptyCounter: 10, 
        }
    },
    mounted() {

    },
    methods: {
        addCounter: function () {
            if(this.fullCounter <= 10 && total.counter > 0) {
                this.total.counter -= 1,
                this.fullCounter += 1,
                this.emptyCounter -= 1
            }
        },
        subtractCounter: function () {
            if(this.emptyCounter >= 0) {
                this.total.counter += 1,                   
                this.fullCounter -= 1,
                this.emptyCounter += 1
            }
        }
    }
}

有人能指出我正确的方向吗？

编辑：这是一个GA示例： { “id”：600226， “customer_id”：1， “survey_id”：600006， “user_id”：1， “部分”：1， “pos”：2， “title”：null “公司1”， “必需”：0， “副标题”：null }

Vue独立柜台

0 个答案: