Question 231232 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – unable to set property disable to a button

as shown in the below posted code, i am developing a child-component, in it i created a button and i want to add disable property.
given the code below, the disable property is underlined with red color and the error message says:

Type '"isDigitizePolygonDisabled"' is not assignable to type 'Booleanish | undefined'

please let me know how to set disable property correctly
code:

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

2

Answers


  1. 0

    In Vue, when you want to bind a boolean attribute like disabled, you can use the v-bind directive (or its shorthand :). This binds an attribute to an expression.

    If you try to bind the disabled attribute the way you’re doing it, Vue thinks you’re trying to set the string ‘isDigitizePolygonDisabled’ as the value for disabled, which is invalid. Hence, the error you’re seeing.

    So, final code will be:

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

    I prefered to use defineComponent and setup which I think are more straight forward to use.

    Hope this helps!

    Login or Signup to reply.
  2. 0

    Solution # 1, declare as property

    Options API

    In the Options API, you can define your component’s properties in the props attribute, the value of which you’ll need to pass when declaring the component. You can pre-set the property’s data type, in this case, boolean. You can provide a default value, as in my example, true, or you can decide to make the variable mandatory, in which case specifying a default value is not significant. For the sake of quickly illustrating my example, I had to work with a default value.

    const { createApp } = Vue

const app = createApp({
  props: {
    isDigitizePolygonDisabled: { 
      type: Boolean,
      default: true, // when not required, will can declare default value
      // required: true, // if need required property
    }
  }
}).mount('#app')
    <script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>

<div id="app">
  <button id="idDigitizePolygonBtn" class="digitizePolygonBtn" disabled='isDigitizePolygonDisabled'>
    Test Button
  </button>
</div>
    How to import Children Component to Parent Element (Options API)

    If we want to pass a variable or a non-string value to an attribute – currently, we want to pass a boolean type – then in every case, a colon must be placed before the variable. This way, the type of the passed value remains unchanged.

    If the component containing the button is named ChildrenButton, then the declaration within the parent element would look like this:

    <template>
  <div>
    <ChildrenButton :isDigitizePolygonDisabled="false" />
  </div>
</template>

<script>
import ChildrenButton from './path/to/ChildrenButton.vue'

export default {
  components: {
    ChildrenButton, // now can use this component on <template>
  }
}
</script>

    Composition API

    In the Composition API, the defineProps() function can be used to define properties. Its structure is similar to the example from the previous Options API.

    const { createApp, defineProps } = Vue

const app = createApp({
  setup() {
    // need use defineProps
    const props = defineProps({
     isDigitizePolygonDisabled: { 
        type: Boolean,
        default: true, // when not required, will can declare default value
        // required: true, // if need required property
      }
    })
    
    return { props }
  }
}).mount('#app')
    <script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>

<div id="app">
  <button id="idDigitizePolygonBtn" class="digitizePolygonBtn" disabled='isDigitizePolygonDisabled'>
    Test Button
  </button>
</div>
    How to import Children Component to Parent Element (Composition API)

    If we want to pass a variable or a non-string value to an attribute – currently, we want to pass a boolean type – then in every case, a colon must be placed before the variable. This way, the type of the passed value remains unchanged.

    If the component containing the button is named ChildrenButton, then the declaration within the parent element would look like this:

    <template>
  <div>
    <ChildrenButton :isDigitizePolygonDisabled="false" />
  </div>
</template>

<script setup>
import ChildrenButton from './path/to/ChildrenButton.vue' // now can use this component on <template>
</script>

    Solution # 2, declare as reactive variable

    Instead of setting a property, you also have the option to declare a fixed reactive variable. In this case, the variable’s value cannot be directly assigned from outside.

    Options API

    In the case of the Options API, you can declare such variables within the data() property.

    const { createApp } = Vue

const app = createApp({
  data() {
    return {
      isDigitizePolygonDisabled: true, // declare reactive variable with default variable (not property)
    }
  }
}).mount('#app')
    <script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>

<div id="app">
  <button id="idDigitizePolygonBtn" class="digitizePolygonBtn" disabled='isDigitizePolygonDisabled'>
    Test Button
  </button>
</div>

    Composition API

    In the Composition API, you have access to the reactive() and ref() functions. The provided descriptions demonstrate their functionalities well.

    • ref() – Vue Docs (reactive core)
    • reactive() – Vue Docs (reactive core)
    const { createApp, ref } = Vue

const app = createApp({
  setup() {
    const isDigitizePolygonDisabled = ref(true) // declare reactive variable with default variable (not property)
    
    return { isDigitizePolygonDisabled }
  }
}).mount('#app')
    <script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>

<div id="app">
  <button id="idDigitizePolygonBtn" class="digitizePolygonBtn" disabled='isDigitizePolygonDisabled'>
    Test Button
  </button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search