[vue.js] 데이터 종류 별(data / object / array) button disabled 정리

서론

vue.js 개발하면서 자주 사용하는 dsiabled 를 정리해보려고 한다.

소스

html

<template>
  <v-container fluid>
    <v-row>
      <v-col cols="4">
        <v-subheader>testobj</v-subheader>
      </v-col>
      <v-col cols="8">
        <v-text-field label="a" v-model="testObj.a"></v-text-field>
        <v-text-field label="b" v-model="testObj.b"></v-text-field>
        <v-text-field label="c" v-model="testObj.c"></v-text-field>
      </v-col>
    </v-row>
    ---------------------------------------------------
    <v-row>
      <v-col cols="4">
        <v-subheader>test2obj</v-subheader>
      </v-col>
      <v-col cols="8">
        <v-text-field label="a" v-model="test2Obj.a"></v-text-field>
        <v-text-field label="b" v-model="test2Obj.b"></v-text-field>
        <v-text-field label="c" v-model="test2Obj.c"></v-text-field>
      </v-col>
    </v-row>
    ---------------------------------------------------
    <br />
    <v-btn @click="addTableData()">테이블 데이터 추가</v-btn>
    <v-btn @click="delTableData()">테이블 데이터 삭제</v-btn>
    <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
      hide-default-footer
    ></v-data-table>
    ---------------------------------------------------
    <br />

    <v-btn :disabled="testObj.a === ''">testObj - a</v-btn> -
    <v-btn :disabled="testObj.b === ''">testObj - b</v-btn> -
    <v-btn :disabled="testObj.c === ''">testObj - c</v-btn> -
    <v-btn :disabled="disabledTestObj">testObj</v-btn>
    <br /><br />
    <v-btn :disabled="test2Obj.a === ''">test2Obj - a</v-btn> -
    <v-btn :disabled="test2Obj.b === ''">test2Obj - b</v-btn> -
    <v-btn :disabled="test2Obj.c === ''">test2Obj - c</v-btn> -
    <v-btn :disabled="disabledTest2Obj">test2Obj</v-btn>
    <br /><br />
    <v-btn :disabled="disabledAll">all</v-btn>
  </v-container>
</template>

설명

input 3개를 묶는 object 2개와 table 영역 그리고 데이터 기반으로 disabled 적용 되어있는 버튼 9개로 구성되어있다.

버튼 6개는 input 데이터 기반으로 disabled 되어있으므로 html에 바로 적용하였다.

ex) :disabled="testObj.a === ''"

 

script

<script>
export default {
  data() {
    return {
      testObj: { a: "", b: "", c: "" },
      test2Obj: { a: "", b: "", c: "" },
      headers: [
        {
          text: "Dessert (100g serving)",
          value: "name",
        },
        { text: "Calories", value: "calories" },
        { text: "Fat (g)", value: "fat" },
      ],
      desserts: [],
      addData: {
        name: "Frozen Yogurt",
        calories: 159,
        fat: 6.0,
      },
    };
  },
  computed: {
    disabledTestObj() {
      return (
        Object.values(this.testObj).filter((item) => item === "").length > 0
      );
    },
    disabledTest2Obj() {
      return (
        Object.values(this.test2Obj).filter((item) => item === "").length > 0
      );
    },
    disabledAll() {
      return (
        this.disabledTestObj ||
        this.disabledTest2Obj ||
        this.desserts.length === 0
      );
    },
  },
  methods: {
    addTableData() {
      this.desserts.push(this.addData);
    },
    delTableData() {
      this.desserts.pop();
    },
  },
};
</script>

설명

data : input 3개씩 묶여있는 testObj / test2Obj, 테이블을 구성하는 데이터 headers / desserts, 그리고 테이블에 add할 default 데이터 addData로 구성

 

computed : disabled를 제어하는 기능.

- disabledTestObj / disabledTest2Obj : Object.values 를 사용하여 obejct > array로 변환후 filter를 사용하여 빈값의 갯수를 카운팅하여 disabled를 제어

- disabledAll : disabledTestObj / disabledTest2Obj 의 true / false 와 테이블 데이터를 length를 체크하여 disabled를 제어

 

metods : 테이블 데이터 테스트를 위한 간단한 array 데이터 set

확인

* 테스트 소스 : https://github.com/hjh830827/test-project1/blob/master/src/views/DataValitionTest.vue