P粉3767388752023-08-17 12:21:54
In Vue, when you want to bind a boolean property (such as disabled), you can use the v-bind directive (or its abbreviation :
). This binds a property to an expression.
If you try to bind the disabled property the way you do, Vue will think that you are trying to set the string "isDigitizePolygonDisabled" to the value of disabled, which is invalid. Hence the error you see.
So, the final code will be:
<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>
I prefer using defineComponent
and setup
, I think it's more straightforward.
Hope this helps!