Agfdhyk

I need some help. I have a component where I pass a prop and I need to assign a variable from my data to the prop variable, but in a reactive way. I cant modify the child it only accepts Booleans. The problem is that Vue initializates the data, but the disabled attribute isnt reactive. I know that if I pass an object to the disabled attribute that will be reactive, but I cant.

data() {

 let editmode = true;



 return {

  EditMode: editmode,

  schema: [

    {

     disabled: !editmode,

    }

  ]

 }

}

In the future I need to edit the value of EditMode and I want to that edit to be passed to my child component. I pass the schema variable to the child.

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>

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>