Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

cleanse's avatar

Using _uid and Iteration

I am trying to iterate and check some boxes based on an array of data. The way I was trying to do it (using _uid) did not seem to work.

//The second checkbox will be checked by default
var build = [true, true, false]

let enhancements = [
    {
        name: "Action One"
    },
    {
        name: "Action Two"
    },
    {
        name: "Action Three"
    }
]

Vue.component('cleanse-checkbox', {
    props: ['enhancement'],

    data() {
        return {
            isSelected: 'action-point-on',
            notSelected: 'action-point-off',
            build: build[this._uid-1]
        };
    },

    template: `
        <div class="mb-2">
            <p>{{ build }}</p>
            <button :class="[isActive ? isSelected : notSelected, notSelected]" 
            v-on:click="toggleEnhancement">{{ enhancement.name }}</button>
        </div>
    `,

    computed: {
        isActive: function () {
            return this.build;
        }
    },

    methods: {
        toggleEnhancement: function() {
            this.build = this.build == 0;
            this.$emit('toggle-enhancement', [this._uid-1, this.build])
        }
    }
});

var app = new Vue({
    el: '#app',
    delimiters: ['${', '}'],
    data: {
        build: build,
        enhancements: enhancements
    },
    methods: {
        updateEnhancement: function (value) {
            this.build[value[0]] = value[1]
        }
    }
});```

```html
<div id="app">
        <p>${ build }</p>
        <cleanse-checkbox v-for="enhancement in enhancements"
                          :enhancement="enhancement"
                          v-on:toggle-enhancement="updateEnhancement"></cleanse-checkbox>
</div>

Is there a proper 'vue' way to accomplish something like this? Or am I on the right track using improper syntax?

0 likes
2 replies

Please or to participate in this conversation.