CodeHoon

사용환경 : Vue.js 2, vue-cli, vue-Router 사용

router-link + binding 를 통해 해당 내용을 전달해준다.

<router-link :to="'/detail/'+123453" >

여기서 `123453` 이 전달하고자하는 변수가 될 수도 있다.

1. Home.vue

<template>
// 각각의 id를 가진 리스트를 v-for로 출력.
<div class="movie" v-for="movie in movies" :key="movie.imdbID">
	<router-link :to="'/movie/' + movie.imdbID" />
    	// router-link를 통해 반복문을 통해 출력된 movie 객체의 id값을 전달하고자 한다.

</template>

2. Index.js (router)

  {
    path: '/movie/:id',
    name: 'Movie Detail',
    component: MovieDetail
  }

: 바인딩을 통해 id값을 전달할것이라고 선언한다.

3. MovieDetail.vue

2가지 방법으로 출력이 가능하다.

  1. html 요소에 바로 텍스트만 출력
  2. script 내에서 추가 가공 후 또다른 전체 데이터를 출력

  1. html 요소에 출력

  html 요소에 출력하는 것은 간단하다.

<template>
	<div> {{ $route.params.id }} </div>
</template>

이렇게 바로 사용이 가능하다.

  2. script 내에서 가공 (후 또 다른 전체 데이터를 출력)

  위에서 $route를 바로 사용하던데에 반해 이번에는 vue의 useRoute 기능을 사용해야 한다.

import { useRoute } from 'vue-router'

export default {
  setup () {
    const route = useRoute()
    const paramsValue = route.params.id  
  }
}

이렇게 paramsValue로 변수를 선언하여 사용할 수 있다.

안녕하세요 상훈입니다.

해당 에러에 대해 말씀드리겠습니다.

바인드를 하려는 대상에 key 가 설정되지 않았기에 해당 에러가 발생하였습니다.

그러니 :key를 추가하면 됩니다.

예시)

이렇게 button을 data-binding으로 v-for를 사용하려고할 때, key를 정해주지 않아 발생하는 에러입니다.

위처럼 key 값을 정해주면 해결됩니다.

이상입니다.

안녕하세요 상훈입니다.

Vue.js에서 반복문을 사용하고, 그 속에서 data binding이 된 객체 데이터를 출력하는 방법을 포스팅하겠습니다.

1. data

2. template

1. data

import products from './assets/listData.js'
export default {
  name: 'App',
  data () {
    return {
      products: products,
      }
    }
  }

외부의 객체 배열을 products라는 변수로 import 하여 vue 내에서 products로 사용하겠다고 선언한 내용입니다.

아래는 export한 객체 배열 내용 예시입니다.

2. template

자, 이제 반복문과 그에 해당하는 문법을 작성해야겠죠?

for의 기본 문법입니다.

<div v-for="item in items" :key="item"></div>
<div v-for="(item, index) in items" :key="item"></div>

JavaScript 혹은 React 같은 경우 많이 작성하는 방식입니다.

첫 번째는 1개의 인자만 사용할 경우이고, 두 번째는 index를 주고 싶을 경우입니다.

저는 이 중 첫 번째만 사용해보도록하겠습니다.

 <div v-for="product in products" :key="product">
    <img src="{{ product.image }}" alt="이미지">
    <h4>{{ product.title }}</h4>
    <p>{{ product.price }}원</p>
  </div>

작성 방법은 받아온 객체의 key값을 기준으로 작성하면 value가 출력되어져 나오는 방식입니다.

laravel의 blade 문법이 생각나는군요

결과입니다. css를 제대로 적용시켜주지 않고, 이미지 url이 올바르게 작성되어있지 않아 이미지가 깨졌지만, 나머지는 정상적으로 반복되어 출력되었습니다.

이상입니다.