Tidak dapat menetapkan atribut lumpuhkan kepada butang

Question

Dalam kod yang ditunjukkan di bawah, saya sedang membangunkan komponen kanak-kanak di mana saya telah mencipta butang dan ingin menambah atribut disable Memandangkan kod berikut, atribut disable digariskan dengan warna merah dan mesej ralat berbunyi:

Type '"isDigitizePolygonDisabled"' tidak boleh ditugaskan untuk menaip 'Booleanish undefined'

Sila beritahu saya cara menetapkan atribut lumpuhkan kod:

<template>
<button id="idDigitizePolygonBtn" class="digitizePolygonBtn" disabled='isDigitizePolygonDisabled'>
    <slot></slot>
  </butang>
</template>

<skrip lang="ts">
import { ref } daripada 'vue'

let isDigitizePolygonDisabled = ref(true)
eksport lalai {
    data() {
        kembali {
            isDigitizePolygonDisabled
        }
    },
    alat peraga: {
        isDigitizePolygonDisabled: {
            jenis: Boolean,
            dikehendaki: benar
    },
}
</script>

Answer 1

Dalam Vue, apabila anda ingin mengikat sifat boolean (seperti dilumpuhkan), anda boleh menggunakan arahan v-bind (atau singkatannya :). Ini mengikat harta kepada ungkapan.

Jika anda cuba mengikat harta orang kurang upaya seperti yang anda lakukan, Vue akan fikir anda cuba menetapkan rentetan "isDigitizePolygonDisabled" kepada nilai orang kurang upaya, yang tidak sah. Oleh itu ralat yang anda lihat.

Jadi, kod terakhir ialah:

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

Saya lebih suka menggunakan defineComponent和setup, saya rasa ia lebih mudah.

Semoga ia membantu!