I have a basic FormComponent:
<template>
<form>
<fieldset>
<slot />
</fieldset>
<span v-if="!isEditing" @click="edit()">Edit</span>
</form>
</template>
<script>
export default {
data () {
return {
isEditing: false,
}
},
methods: {
edit (state) {
this.isEditing = !this.isEditing
}
}
}
</script>
When I include the component:
<FormComponent>
<input value="Man" type="text" :disabled="!isEditing">
</FormComponent>
The input fields are correctly inserted into the component, but the :disabled="!isEditing" binding in the slot does not update based on changes to isEditing within the FormComponent.
The Vue documentation is informative, yet there may be gaps in addressing specific scenarios.