[Vue] template에서 데이터 접근시 사용하는 키워드 $data 사용법

$data로 data() 옵션에 선언한 데이터에 접근할 수 있다

첫번째 방법: 점 표기법

$data.type은 'movie'를 의미하고 $data.number는 10을 의미한다

두번째 방법: 대괄호 표기법

$data['type']은 'movie'를 의미하고 $data['number']는 10을 의미한다

 

예제

<template>
  <div class="selects">
    <select
      v-for="filter in filters"
      v-model="$data[filter.name]"
      :key="filter.name">
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 'movie',
      number: 10,
      filters: [
        {
          name: 'type',
          items: ['movie', 'series', 'episode']
        }, 
        {
          name: 'number',
          items: [10, 20, 30]
        }
      ]
    }
  },
}
</script>