How to make change in child components dynamically from parent in Vue.js

Question

I have a form that contains some custom components like custom-input, custom-button, etc. in my custom-form component. My custom components (except custom-form) contain a disabled props. I want to set the disabled props to true in all custom components when a submit button is clicked.

I need to do that dynamically and I don't know which custom components are used in a form. I also need to mention that, It is possible that I have more than one form on a page.

How can I handle that?

Here is what I've tried.

--- Main Component ---
<template>
  <div>
    <slot />
  </div>
</template>
<script>
export default {
}
</script>

--- Component1 ---
<template>
  <div>
    <span v-if="!disabled">this is Comp1</span>
  </div>
</template>
<script>
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  }
}
</script>

--- Component2 ---
<template>
  <div>
    <span v-if="!disabled">this is Comp2</span>
  </div>
</template>
<script>
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  }
}
</script>

--- My directive ---
import Vue from 'vue'

Vue.directive('disable', {
  bind: (el, binding, vnode) => {
    methods.setChildrent(vnode.context.$children, binding.value)
  }
})

const methods = {
  setChildrent(children, value) {
    children.forEach(element => {      
      this.setChildrent(element.$children, value)
      if(element.$options.propsData)
        if ('disabled' in element.$props)
          element.$props.disabled = value
    })
  }
}

--- Page ---
<template>
  <MainComp v-disable="true">
    <Comp1></Comp1>
    <Comp2></Comp2>
  </MainComp>
</template>

<script>
import Comp1 from './Comp1.vue'
import Comp2 from './Comp2.vue'
import MainComp from './MainComp.vue'
import Directives from '../directives/index.js'
export default {
  name: 'HelloWorld',
  components: {
    Comp1,
    Comp2,
    MainComp,
  },
  directives: {
    Directives
  },
  props: {
    msg: String
  },
  methods: {
  },
  mounted() {   
  }
}
</script>

digout · Accepted Answer · 2020-06-18 15:50:04Z

4

Props!

// main component / view

<template>
    <custom-form />
    <custom-form />
</template>

<script>
import CustomForm from './CustomForm'

export default {
    components: { CustomForm },
    data() {
        return {
            disabled: false
        }
    },
    methods: {
        setDisabled() { 
            this.disabled = true
        }
    }
}
</script>

// CustomForm.vue

<template>
    <form @submit.prevent="submit">
        <custom-element :disabled="disabled" />
        <custom-element :disabled="disabled" />
    </form>
</template>

<script>
    import CustomElement from './CustomElement'

    export default {
        data() { 
            return {
                disabled: true
            }
        },
        props: ['disabled'],
        components: { CustomElement },
        methods: {
            submit() {
                this.disabled = true
            }
        }
    }
</script>

// CustomElement.vue

<template>
    <input :disabled="disabled" />
</template>

<script>
    export default {
        props: ['disabled']
    }
</script>

edited Jun 18, 2020 at 15:50

answered Jun 17, 2020 at 22:23

digout

4,2831 gold badge35 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Mohammad Taherian Over a year ago

Thank you for the answer. Is that possible we do not set :disabled in propsData and dynamically change it through a method? As I mentioned in my question we may have multiple forms on a page and with your approach, all the forms will be disabled.

Mohammad Taherian Over a year ago

I am looking for a solution to create a generic and dynamic behavior for all the forms without the need to write :disabled="disabled" in all custom elements.

digout Over a year ago

This is the conventional way, if you introduce something unconventional it will be more troublesome to maintain and learn for anyone else seeing your code. Regarding having multiple forms, you would just expose the prop also on the custom-form element. I will update example.

Mohammad Taherian Over a year ago

Thank you for the answer. But even in this model if you submit the first form, it will change the second form disabled property. On the other hand, we don't want to define a specific disabled variable for each form in data section.

digout Over a year ago

Ok so just move the props around so the scope of disabled keeps to <custom-form />

|

Mohammad Taherian · Accepted Answer · 2020-06-18 17:11:07Z

I solved this issue by the below approach. I don't know if there are any cases that may cause a problem or not but I did some tests and it was fine.

//Component1

<template>
  <div>
    <span v-if="!disabled">this is Comp1</span>
  </div>
</template>
<script>
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  }
}
</script>

//Component2

<template>
  <div>
    <span v-if="!disabled">this is Comp2</span>
  </div>
</template>
<script>
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  }
}
</script>

//MainComponent

<template>
  <div>
    <slot />
  </div>
</template>
<script>
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    disabled(val) {
      this.setChildrenStatus(val)
    }
  },
  methods: {    
    setChildrenStatus(status) {      
      this.$slots.default.forEach(item => {
        if (item.componentOptions && item.componentOptions.propsData) {
          item.componentOptions.propsData['disabled'] = status
        }
      })
    }    
  }
}
</script>

//Mainpage

<template>
  <MainComp :disabled="disabled">
    <Comp1></Comp1>
    <Comp2></Comp2>
    <br>
    <button @click="setDisabled">submit</button>    
  </MainComp>
</template>

<script>
import Comp1 from './Comp1.vue'
import Comp2 from './Comp2.vue'
import MainComp from './MainComp.vue'
export default {
  name: 'HelloWorld',
  components: {
    Comp1,
    Comp2,
    MainComp,
  },
  data() {
    return {
      disabled: false
    }
  },
  props: {
    msg: String
  },
  methods: {
    setDisabled() {
      this.disabled = !this.disabled
    }
  }
}
</script>

Collectives™ on Stack Overflow

How to make change in child components dynamically from parent in Vue.js

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related