Vue.js에서 Selectbox 컴포넌트 만들기

Vue.js에서 입력 폼을 만들 때 사용할 수 있는 Selectbox 컴포넌트를 만드는 방법을 소개하고자 한다.

SelectBox.vue (이름은 자유롭게 정한다) 파일을 하나 만들고 template를 아래와 같이 작성한다.

<template>
    <select
          v-model="this.value"
          class="custom-select"
          v-bind:id="input_id"
          v-on:input="updateValue($event.target.value)"
    >
        <option v-for="(item, index) in items" :value="index">{{ item }}</option>
    </select>
</template>

Vue.js 2.2 버전부터 v-model을 사용하는 컴포넌트는 value props를 가진다. (참고: #) 따라서 별도로 v-bind로 props를 내려줄 필요 없이 하위 컴포넌트에서 this.value라고만 명시해주면 상위 컴포넌트의 value 값을 하위 컴포넌트 값으로 가져올 수 있다.

그리고, v-on:input="updateValue($event.target.value)" 부분은 사용자가 selectbox의 값을 변경할 경우 변경된 값을 상위 컴포넌트로 전송하기 위한 코드이다. 이 코드가 없으면 상위 컴포넌트에 사용자가 변경한 값이 반영되지 않으니 주의하여야 한다.

script는 아래와 같이 작성한다.

<script>
    export default {
        name: "SelectBox",

        data() {
            return {
                //
            };
        },

        props: ['value', 'items', 'input_id'],

        methods: {
            updateValue: function (value) {
                this.$emit('input', value);
            }
        }

    }
</script>

updateValue 메서드는 사용자가 입력한 값을 input 이벤트로 내보내는 역할을 한다.

마지막으로, 컴포넌트를 가져다 쓰는 부분의 코드는 아래와 같다.

<SelectBox
       v-model="preselect_value"
       :items="somethings"
       :input_id="'my_selectbox'"
       @input="value => { preselect_value = value }"
></SelectBox>

Vue.js Component Develop

Mutators 사용 시 "laravel Trying to get property 'name' of non-object" 에러 해결법

Laravel Mutators를 이용하여 Relationships 관계에 있는 컬럼의 값을 포함하고자 하는 경우 getAttribute() Magic 메서드로 포함하고자 할 컬럼을 지정해주고 $appends 프로퍼티에 명시하여야 한다.

다음 코드는 Post 모델에 Category 모델의 name 컬럼을 Post 모델의 category_name 프로퍼티로 포함하는 예제이다.

class Post extends Model
{
    protected $appends = [
        'category_name',
    ];

    public function category()
    {
        return $this->belongsTo(Category::class);
    }

    public function getCategoryNameAttribute()
    {
        return $this->category->name;
    }

}

하지만, 중간중간 해당하는 Category 모델이 없는 경우 (카테고리가 삭제 된 경우) "laravel Trying to get property 'name' of non-object" 에러가 발생한다.

당연히 해당 모델이 없기 때문에 $this->category는 null이 되고,  $this->user->name 프로퍼티에 접근할 수 없기 때문에 발생하는 문제이다.

이럴 경우 다음과 같이 null 여부를 체크하면 된다.

public function getCategoryNameAttribute()
{
    return $this->user !== null ? $this->user->name : null;
}

뿐만 아니라, 개발에 있어서 이와 같은 방어적 코딩을 습관화 하는 것이 좋다.

Develop Laravel Mutators Troubleshooting

MariaDB에서 artisan migrate 시 Syntax Error 문제 해결 방법

Laravel에서 artisan migrate 명령을 실행 시 MariaDB에서는 다음과 같은 에러가 발생하는 경우가 있다.

[Illuminate\Database\QueryException]
SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes (SQL: alter table users add unique users_email_unique(email))

[PDOException]
SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes

이럴 경우 AppServiceProvider.php의 boot() 메서드에 다음 구문을 추가하여 해결할 수 있다.

use Illuminate\Support\Facades\Schema;

public function boot()
{
    Schema::defaultStringLength(191);
}

Laravel migrate MariaDB Troubleshooting