Die Attributdeaktivierung konnte nicht auf die Schaltfläche festgelegt werden

Question

Im unten gezeigten Code entwickle ich eine untergeordnete Komponente, in der ich eine Schaltfläche erstellt habe und das Attribut disable hinzufügen möchte. Bei folgendem Code ist das Attribut disable rot unterstrichen und die Fehlermeldung lautet:

Typ „isDigitizePolygonDisabled“ kann nicht dem Typ „Booleanish |“ zugewiesen werden.
<p>Bitte erklären Sie mir, wie ich das Attribut <code>disable</code> <strong>code</strong> richtig einstelle.
<pre class="brush:php;toolbar:false;"><template>
<button id="idDigitizePolygonBtn" class="digitizePolygonBtn" deaktiviert='isDigitizePolygonDisabled'>
    <slot></slot>
  </button>
</template>

<script lang="ts">
{ ref } aus 'vue' importieren

let isDigitizePolygonDisabled = ref(true)
Standard exportieren {
    Daten() {
        zurückkehren {
            isDigitizePolygonDisabled
        }
    },
    Requisiten: {
        isDigitizePolygonDisabled: {
            Typ: Boolesch,
            erforderlich: wahr
    },
}
</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，我认为这更直接。

希望对您有所帮助！