Vue data 값 가져오기 - vue data gabs gajyeoogi

Development/Vue.js

[Vue.js] checkbox, radio, select 값 가져오기 / 기본값 설정

레오나르도 다빈츠 2021. 11. 17. 13:18

자바스크립트의 경우 클릭한 값을 찾을 때 for, foreach를 사용하여 엘리먼트를 찾아야한다.

Vue는 v-model을 사용하여 클릭 시 data에 바로 값이 바인딩되기 때문에 굉장히 편리하게 찾을 수 있다.

값 할당하기

클릭한 input 엘리먼트의 value가 data()에 선언된 'prodArr'이라는 배열에 삽입된다.

<template>
...
  <!-- v-for로 데이터를 가져와 출력하는 부분 -->
  <!-- 체크박스 클릭 시 v-model을 사용하여 'prodArr'이라는 배열에 값을 할당한다. -->
  <li class="prod" v-for="(item, index) in prods" :key="index">
      <input type="checkbox" v-model="prodArr" :value="item.name" />
  </li>
...
</template>

<script>
...
data: () => {
	prodArr: [], // 선택된 input의 value를 담는 배열
}
</script>

기본값 설정

v-model을 사용하는 경우 "checked"를 사용할 수 없다.

그래서 기본값을 세팅할 때는 v-model에 연결된 데이터에 input의 value를 미리 넣어두면 체크된 상태가 된다.

◽ radio, select의 경우

<div>
  <p>음료</p>
  <div>
    <input type="radio" v-model="selectedDrink" value="coffee" id="coffee" />
    <label for="coffee">커피</label>
    <input type="radio" v-model="selectedDrink" value="juice" id="juice" />
    <label for="juice">주소</label>
    <input type="radio" v-model="selectedDrink" value="tea" id="tea" />
    <label for="tea">티</label>
  </div>
</div>

<script>
...
data: () => {
	// 선택된 input의 value를 담는 변수
	// 초기화를 'tea'로 설정하였고, value="tea"인 radio가 기본값으로 선택된다. 
	selectedDrink: 'tea',
}
</script>

◽ checkbox의 경우

<div>
  <p>케이크</p>
  <div>
    <input type="checkbox" v-model="selectedCake" value="cake_1" id="cake_1" />
    <label for="cake_1">레드벨벳 케이크</label>
    <input type="checkbox" v-model="selectedCake" value="cake_2" id="cake_2" />
    <label for="cake_2">당근 케이크</label>
    <input type="checkbox" v-model="selectedCake" value="cake_3" id="cake_3" />
    <label for="cake_3">고구마 케이크</label>
  </div>
</div>

<script>
...
data: () => {
	// 선택된 input의 value를 담은 배열
	// 체크박스는 다중 값을 선택할 수 있기때문에 배열([]) 형태이다.
	// value가 "cake_1", "cake_3"인 input이 기본값으로 선택된다. 
	selectedCake: ['cake_1', 'cake_3'],
}
</script>

참고

폼 입력 바인딩 — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

kr.vuejs.org

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

320x100

저작자표시

(데이터 바인딩) v-bind

데이터 바인딩

1. 내용 데이터 바인딩

< script > data()에 데이터를 적어두고,

< template > 원하는 부분에 이중 대괄호로 불러오기!

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">

    <h4>Hello world, this is {{name}}.</h4>

  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      name: "sarah",
    };
  },
}
</script>

<style>
생략
</style>

2. 속성 데이터 바인딩

< script > data()에 속성 적어두고,

< template > 원하는 부분에 v-bind:style="" 로 불러오기!

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">

    <p v-bind:style="fonts">font size</p>

  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      fonts: "font-size:26px",
    };
  },
}
</script>

<style>
생략
</style>

3. 데이터를 js파일로 빼서 데이터 바인딩

• 데이터를 적어둔 파일을 import 한다. & 이름을 정해준다.

• < script > data()에 정한 이름을 불러온다.

• < template > 원하는 부분에 이중 대괄호로 불러온다.

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">

    <p>{{Oneroom[0].title}}</p>
    <p>{{Oneroom[0].caption}}</p>

  </div>
</template>

<script>
import Oneroom from './assets/rooms_post.js';

export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      Oneroom: Oneroom,
    };
  },
}
</script>

<style>
생략
</style>

rooms_posts.js

export default [{
      id: 0,
      title: "Sinrim station 30 meters away",
      image: "https://p.rmjo.in/moodShot/qqnt2gl5-1024x512.jpg",
      caption: "18년 신축공사한 남향 원룸, 공기청정기 제공 ☀️",
      price: 340000
    },
    {
      id: 1,
      title: "Changdong Aurora Bedroom(Queen-size)",
      image: "https://p.rmjo.in/moodShot/p85wsl40-1024x512.jpg",
      caption: "침실만 따로 있는 공용 셰어하우스입니다. 최대 2인 가능",
      price: 450000
    },
    {
      id: 2,
      title: "Geumsan Apartment Flat",
      image: "https://p.rmjo.in/moodShot/h51acr02-1024x512.jpg",
      caption: "금산오거리 역세권 아파트입니다. 애완동물 불가능 🐶",
      price: 780000
    },
    {
      id: 3,
      title: "Double styled beds Studio Apt",
      image: "https://p.rmjo.in/moodShot/c3ii5yl7-1024x512.jpg",
      caption: "천호동인근 2인용 원룸입니다. 전세 전환가능",
      price: 550000
    },
    {
      id: 4,
      title: "MyeongIl Apartment flat",
      image: "https://p.rmjo.in/moodShot/6ouap4qn-1024x512.jpg",
      caption: "명일동 아파트 월세, 남향, 역 5분거리",
      price: 680000
    },
    {
      id: 5,
      title: "Banziha One Room",
      image: "https://p.rmjo.in/moodShot/ugt8rk70-512x256.jpg",
      caption: "반지하 원룸입니다. 비올 때 물가끔 새는거 빼면 좋아요",
      price: 370000
    }];

공유하기

게시글 관리

저작자표시 비영리 변경금지

'JAVASCRIPT > Vue.js' 카테고리의 다른 글