ボタンに属性無効を設定できません

Question

以下に示すコードでは、ボタンを作成し、disable 属性を追加する子コンポーネントを開発しています。 次のコードの場合、disable 属性には赤い下線が引かれ、エラー メッセージは次のようになります。

タイプ '"isDigitizePolygonDisabled"' をタイプ 'Booleanish | unknown' に割り当てることはできません

disable 属性 code を正しく設定する方法を教えてください:

<テンプレート>
<button id="idDigitizePolygonBtn" class="digitalizePolygonBtn" disabled='isDigitizePolygonDisabled'>
    <スロット></スロット>
  </ボタン>
</テンプレート>

<script lang="ts">
'vue' から { ref } をインポートします

let isDigitizePolygonDisabled = ref(true)
デフォルトのエクスポート {
    データ（） {
        戻る {
            isDigitizePolygonDisabled
        }
    }、
    小道具: {
        isDigitizePolygonDisabled: {
            タイプ: ブール値、
            必須: true
    }、
}
</script>

Answer 1

Vue では、ブール型プロパティ (無効など) をバインドする場合、v-bind ディレクティブ (またはその省略形 :) を使用できます。これにより、プロパティが式にバインドされます。

あなたが行っている方法で無効なプロパティをバインドしようとすると、Vue は文字列 "isDigitizePolygonDisabled" を無効な値に設定しようとしているとみなします。したがって、表示されるエラーです。

したがって、最終的なコードは次のようになります:

リーリー

私は defineComponent と setup を使用することを好みます。そのほうが簡単だと思います。

＃＃＃お役に立てれば！