无法将属性disable设置为按钮
P粉039633152
2023-08-16 20:54:18
<p>如下所示的代码中，我正在开发一个子组件，在其中我创建了一个按钮，并且想要添加 <code>disable</code> 属性。
给定下面的代码，<code>disable</code> 属性被红色下划线标记，并且错误消息显示：</p>
<pre class="brush:php;toolbar:false;">类型 '"isDigitizePolygonDisabled"' 不能赋值给类型 'Booleanish | undefined'</pre>
<p>请告诉我如何正确设置 <code>disable</code> 属性 <strong>代码</strong>：</p>
<pre class="brush:php;toolbar:false;"><template>
<button id="idDigitizePolygonBtn" class="digitizePolygonBtn" disabled='isDigitizePolygonDisabled'>
<slot></slot>
</button>
</template>
<script lang="ts">
import { ref } from 'vue'
let isDigitizePolygonDisabled = ref(true)
export default {
data() {
return {
isDigitizePolygonDisabled
}
},
props: {
isDigitizePolygonDisabled: {
type: Boolean,
required: true
},
}
</script></pre>
<p><br /></p>
在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，我认为这更直接。希望对您有所帮助！