How to disable/enable combobox in vuejs3

Question

I want to Disable/Enable a combo-box select depending on a property in VueJs 3, my code is:

<template>
    <div class= "combobox">
        <label for={{selector_name}}>
            <p>{{ selector_title }}</p>
        </label>
        <select :name="selector_name"  :id="selector_id" ref="selector">
            <option v-for="(opt, index) in selector_options" :key="`opt ${index}`" value=opt>
            {{ opt }}
            </option>
        </select>
    </div>
</template>

<script lang="js">
export default {
    name: 'ComboBox',
    // data() {
    //     return {
    //         this.opt;
    //     }
    // },
    props: {
        selector_title: {
            type: String,
            required: true
        },
        selector_name: {
            type: String,
            required: true
        },
        selector_id: {
            type: String,
            default: "combobox"
        },
        selector_options: {
            type: Array,
            required: true
        },
        disabled: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        onChange: (event) => {
            console.log(event.target.value);
        },
    },
    computed: { 
        disable() { 
            if (this.disabled) {
                this.$refs.select.setAttribute("disabled", this.disabled);

            } else {
                this.$refs.select.removeAttribute('disabled');
            }
        }
    },
}
</script>

<style>
.combobox{
    max-width: 140px;
    position: relative;
    margin: auto;
    /* border: 1px solid rgb(108, 216, 104); */
    padding: 20px;
    border-radius: 6px;
    font-size:20pt;
    font-weight: bold;
    text-align: center;
    background-color: #474444;
}

.combobox select {
    /* background: transparent; */
    background-color: #474444;
    color: rgb(220, 226, 250);
    width: 140px;
    font-size:16pt;
    text-align: center;
    font-weight: bold;
    border: 2px solid rgb(0, 0, 0);
    border-radius: 6px;
    padding: 5px;
}
</style>

Can you please tell me how can I Disable/Enable my combo-box depending on the property disabled in my case? thanks in advance.

Answer 1

If I understood you correctly, try to bind disabled to disabled property:

const app = Vue.createApp({
  data() {
    return {
      title: "combo",
      name: "djuro",
      options: ['aa', 'bb', 'cc'],
      dis: false
    }
  }
})

app.component('child', {
  template: `
  <div class= "combobox">
    <label :for="selector_name">
      <p>{{ selector_title }}</p>
    </label>
    <select :name="selector_name" :id="selector_id" :disabled="disabled">
      <option v-for="(opt, index) in selector_options" :key="index" value=opt>
      {{ opt }}
      </option>
    </select>
  </div>
  `,
  props: {
    selector_title: {
      type: String,
      required: true
    },
    selector_name: {
      type: String,
      required: true
    },
    selector_id: {
      type: String,
      default: "combobox"
    },
    selector_options: {
      type: Array,
      required: true
    },
    disabled: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    onChange(event) {
      console.log(event.target.value);
    },
  },
})
app.mount('#demo')

.combobox{
    max-width: 140px;
    position: relative;
    margin: auto;
    /* border: 1px solid rgb(108, 216, 104); */
    padding: 20px;
    border-radius: 6px;
    font-size:20pt;
    font-weight: bold;
    text-align: center;
    background-color: #474444;
}

.combobox select {
    /* background: transparent; */
    background-color: #474444;
    color: rgb(220, 226, 250);
    width: 140px;
    font-size:16pt;
    text-align: center;
    font-weight: bold;
    border: 2px solid rgb(0, 0, 0);
    border-radius: 6px;
    padding: 5px;
}

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <button @click="dis = !dis">toggle</button>
  <child :selector_title="title" :selector_name="name" :disabled="dis" :selector_options="options"></child>
</div>