<p>In the code shown below, I am developing a child component in which I have created a button and want to add the <code>disable</code> attribute. Given the following code, the <code>disable</code> attribute is underlined in red, and the error message reads: </p> <pre class="brush:php;toolbar:false;">Type '"isDigitizePolygonDisabled"' cannot be assigned to type 'Booleanish | undefined'</pre> <p>Please tell me how to correctly set the <code>disable</code> attribute <strong>code</strong>: </p> <pre class="brush:php;toolbar:false;"><template> <button id="idDigitizePolygonBtn" class="digitizePolygonBtn" disabled='isDigitizePolygonDisabled'> <slot></slot> </button> </template> <script lang="ts"> import { ref } from 'vue' let isDigitizePolygonDisabled = ref(true) export default { data() { return { isDigitizePolygonDisabled } }, props: { isDigitizePolygonDisabled: { type: Boolean, required: true }, } </script></pre> <p><br /></p>

<template>
  <button id="idDigitizePolygonBtn" class="digitizePolygonBtn" :disabled="isButtonDisabled">
    <slot></slot>
  </button>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
    props: {
        isDigitizePolygonDisabled: { 
            type: Boolean,
            required: true
        },
    },
    setup(props) {
        
        // For now, just return the prop
        return {
            isButtonDisabled: props.isDigitizePolygonDisabled
        }
    }
})
</script>