無法將屬性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 } 從 '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，我認為這更直接。

希望對您有幫助！