如下所示的代码中，我正在开发一个子组件，在其中我创建了一个按钮，并且想要添加 disable 属性。
给定下面的代码，disable 属性被红色下划线标记，并且错误消息显示：
类型 '"isDigitizePolygonDisabled"' 不能赋值给类型 'Booleanish | undefined'
请告诉我如何正确设置 disable 属性 代码：
1
975<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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
在Vue中，当您想要绑定一个布尔属性（如disabled）时，您可以使用v-bind指令（或其简写
:）。这将一个属性绑定到一个表达式。如果您尝试以您的方式绑定disabled属性，Vue会认为您正在尝试将字符串“isDigitizePolygonDisabled”设置为disabled的值，这是无效的。因此，您看到的错误。
所以，最终的代码将是：
<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>我更喜欢使用
defineComponent和setup，我认为这更直接。希望对您有所帮助！