无法将属性disable设置为按钮

Question

如下所示的代码中，我正在开发一个子组件，在其中我创建了一个按钮，并且想要添加 disable 属性。 给定下面的代码，disable 属性被红色下划线标记，并且错误消息显示：

类型 '"isDigitizePolygonDisabled"' 不能赋值给类型 'Booleanish | undefined'

请告诉我如何正确设置 disable 属性 代码：

<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>

Answer 1

在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，我认为这更直接。

希望对您有所帮助！