Impossible de définir la désactivation de l'attribut sur le bouton

Question

Dans le code ci-dessous, je développe un composant enfant dans lequel j'ai créé un bouton et je souhaite ajouter l'attribut disable Étant donné le code suivant, l'attribut disable est souligné en rouge et le message d'erreur se lit comme suit :

Le type '"isDigitizePolygonDisabled"' ne peut pas être attribué au type 'Booleanish |
<p>Veuillez me dire comment définir correctement l'attribut <code>disable</code>
<pre class="brush:php;toolbar:false;"><template>
<button id="idDigitizePolygonBtn" class="digitizePolygonBtn" désactivé='isDigitizePolygonDisabled'>
    <emplacement></emplacement>
  </bouton>
</modèle>

<script lang="ts">
importer { ref } depuis 'vue'

soit isDigitizePolygonDisabled = ref (true)
exporter par défaut {
    données() {
        retour {
            isDigitizePolygonDisabled
        }
    },
    accessoires : {
        isDigitizePolygonDisabled : {
            tapez: booléen,
            obligatoire : vrai
    },
}
</script>

Answer 1

Dans Vue, lorsque vous souhaitez lier une propriété booléenne (telle que désactivée), vous pouvez utiliser la directive v-bind (ou son abréviation :). Cela lie une propriété à une expression.

Si vous essayez de lier la propriété désactivée comme vous le faites, Vue pensera que vous essayez de définir la chaîne "isDigitizePolygonDisabled" sur la valeur désactivée, ce qui n'est pas valide. D'où l'erreur que vous voyez.

Donc, le code final sera :

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

Je préfère utiliser defineComponent和setup, je pense que c'est plus simple.

J'espère que cela aide !