Level 1
Created a fiddle: https://jsfiddle.net/wb37t84j/
For some reason after emitting, the build data object does not update.
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
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?
Incase people find they ran into a similar issue:
http://stackoverflow.com/questions/42654344/using-uid-and-iteration/42655020#42655020
Please or to participate in this conversation.