※v-model에 변수를 동적으로 바인딩
프로젝트 진행 중, 특정 값에 따라 v-model에 바인딩 되는 변수를 다르게 해달라는 요청이 들어왔다. 예를 들어 testshow 조건이 true이면 test1을, false이면 test2를 바인딩 해달라는 것이었다. 가장 직관적이고 먼저 떠오르는 방식은 아래와 같았다.
<input type="text" v-if="testshow" v-model="test1">
<input type="text" v-else="!testshow" v-model="test2">
근데 순간 "삼항연산자로는 어떻게하지?"라는 궁금증이 생겼다. 그래서
<input type="text" v-model="testshow?test2:test1">
이와 같이 코드를 수정하니, 'v-model value must be a valid JavaScript member expression.'이라는 에러가 나왔다. 우선 후다닥 'v-if,v-else'로 해서 빠르게 해결한 뒤, 서칭하다 '**속성접근자 괄호표기법**'을 이용하는 방법을 찾을 수 있었다.
< input type="text" v-model="$data[testshow?'test2':'test1']">
$data는 vue인스턴스의 데이터 객체를 참조한다. 즉, 객체 변수처럼 인식한다고 생각하면 편하다. 그럼 변수값을 원하면 단순히 {{name}}을 사용하는 방법만이 아니라 속성접근자 괄호표기법을 사용하여 {{$data['name']}}과 같이도 변수 값을 얻을 수 있다는 뜻이다. 따라서 위와 같이 속성접근자 안에서 삼항연산자를 사용한다면 굳이 'v-if,v-else'로 두 줄을 작성하지 않고 한 줄로 끝낼 수 있게 된다.
※주의할 점
작성할 때 유의할 점은 두 가지이다.1. 삼항연산자 조건은 변수 작성
$data[testshow?'test2':'test1'] 여기서 testshow는 따옴표나 쌍따옴표로 감싸면 안된다는 점이다. 앞서 얘기했듯이 이 방법은 javaScript의 속성접근자 괄호표기법을 이용하는 방법이다. 따라서 $data['test']이러한 형식으로 변수에 접근하는 것이다. 다만 testshow는 변수값을 보여주기 위한 것이 아니라 변수값에 따라 뒤에 어떤 문장을 주느냐를 정하기 위한 것이기 때문에 testshow는 따옴표를 해선 안된다.2. 객체 안의 데이터일 경우
만약 test가 { test1:"하이", test2:"바이"} 이런식으로 객체라면 어떨까? <input type="text"
v-model="$ data['test'][$data['testshow'] ? 'test2' : 'test1']">
이와 같이 작성해주면 해결 가능하다. 그러나 코드가 매우 지저분해지므로 이런 경우라면 그냥 v-if,v-else 쓰는게 낫겠다.
