0👍
Thanks for your response! I think I havent described my problem enough. I understood that a variable isnt referencable only the objects. I post the answer I got in the Vue forum, in the hope I can help someone else, because this solved my problem. Solution
<template>
<form-generator :schema="schema">
</template>
<script>
Data() {
return {
EditMode: false,
},
methods: {
Edit() {
this.EditMode = true.
}
},
computed: {
schema() {
return [
{
type: "MInput",
disabled: !this.EditMode,
}
]
}
},
</script>
0👍
The attribute disabled is not reactive because he is not receiving a referenced variable to pass it reference across the data structure, basically you is saying disabled: !true, that evaluated to disabled: false, and “false” is just false, not a reference from the variable because a boolean is not referenceable, a object is (by example, and this is one of reasons to data hook return a object)! And if you change the editmode variable nothing is gona to happen … Rethink your data structure and edit what your need putting these data in a object to be reactive! Hope it helps.
If you really need two separated variables, a workaround is use a watcher to detect when editMode changes and populate the changed value to another variable in data..
<template>
<div>
<button @click="change">Change Edit Mode {{editMode}}</button>
<child-component :isEditing="!schema.disabled"></child-component>
</div>
</template>
<script>
export default {
name: "test2",
components: {
'child-component': {
template: "<div>Editing? {{isEditing}}</div>",
props: {
isEditing: {
required: true,
type: Boolean
}
}
}
},
data(){
return {
editMode: true,
schema: {
disabled: false
}
}
},
methods: {
change(){
this.editMode = !this.editMode;
}
},
watch: {
editMode(n){
this.schema.disabled = !n;
}
}
}
</script>