<div id="app">
<h4>
Click on rows
</h4>
<ul>
<li v-for="item in items" :class="{success: item.success}" @click="item.success = !item.success">
{{ item.text }}
</li>
</ul>
<button :disabled="isDisabled">
{{ isDisabled ? 'disabled' : 'enabled' }}
</button>
</div>
.success {
background-color: green;
}
new Vue({
el: "#app",
data: {
items: [
{text: 'hello', success: true},
{text: 'world', success: true},
{text: 'foo', success: true},
{text: 'bar', success: true},
]
},
computed: {
isDisabled() {
return this.items.some(i => !i.success);
}
}
})
View Compiled
This Pen doesn't use any external CSS resources.