[Vue3] Button을 조건에 따라 클릭이 불가하게 만들자

button을 클릭 시 disable된 경우 클릭이 불가능 하게 만들고 싶다.

 Menu 컴포넌트 사용 

<template> 

  <menu

    :List="List"

    @handleClick="btnClick"

  / >

</template>

<script setup>

import { ref } from 'vue';

import menu from '@/components/menu.vue'

const List = ([

  {

    btnTxt : "선택안함",

  },

  {

    disabled: true,

    btnTxt : "버튼1"

  },

  {

    btnTxt : "버튼2"

  },

])

</script>

 

 

 

 하위 컴포넌트 (MENU 컴포넌트)

<template>

  <button

    type="button"

    :class="`menu__btn ${item.disabled ? 'menu__btn--disabled' : '' }`"

    v-for="(item, index) in List"

    :key="index"

    @click=" item.disabled ? null : $emit('handleClick')""

  >

    {{ item.btnTxt }}

  </button>

</template>

<script setup>

import { ref } from 'vue';

const props = defineProps({

  List : {

    type: Array,

    default: [],

  },

  btnTxt : {

    type: String,

    default: '',

  },

  disabled : {

    type: Boolean,

    defualt: false,

  },

});

</script>

 

item.disabled ? null : $emit('handleClick')을 줌으로서

 

item.disabled가 true인 경우에는 null값,
그 외에는 $emit('handleClick')으로 자식 → 부모 컴포넌트로 데이터를 전달주면 됩니다.