Level 51
Change what effects the computed property.
Can you please share your computed method.
1 like
Jan 2, 2023
3
Level 1
Exposing computed property to method?
I know that computed properties are intended to be "read-only" (computed setters being the exception). But I'm at a loss for ideas and need your help. I have a v-for that generated buttons and select fields with the data from the computed property - [{id: 1, system_name: 1, roles "role", disabled: false}] . Now, I want to set disabled: false to true but it doesn't work because I can only read the computed property. This begs the question, is there a way for me to change disabled: false to disabled: true?
Level 1
@MohamedTammam sure.
filteredRoles() {
if (!this.$fetchState.pending) {
const array = []
this.fetchResponse.permissions.forEach(element =>
array.push({
id: element.id,
system_name: element.system_name,
roles: element.system_roles.split(';'),
disabled: false
})
)
console.log(array)
return array
}
return this.filteredRoles
}
Level 51
@luca-dev You can create an array that stores the id of disabled elements
data() {
return {
disabled: [],
}
},
computed: {
filteredRoles() {
if (!this.$fetchState.pending) {
const array = []
this.fetchResponse.permissions.forEach(element =>
array.push({
id: element.id,
system_name: element.system_name,
roles: element.system_roles.split(';'),
disabled: this.disabled.indexOf(element.id) != -1
})
)
console.log(array)
return array
}
return this.filteredRoles
}
}
To toggle the disabled state
<button @click="toggle(filterRole.id)"></button>
<script>
// ...
methods: {
toggle(id){
const index = this.disabled.indexOf(id);
if(index != -1)
this.disabled.push(id)
else
this.disabled.splice(id, 1)
}
}
//...
</script>
Please or to participate in this conversation.