[Vue.js] #4 v-for 사용하여 리스트 자료 하나씩 컴포넌트에 표현하기

programming/Vue

[Vue.js] #4 v-for 사용하여 리스트 자료 하나씩 컴포넌트에 표현하기

euuuuuz: 2022. 3. 3. 14:08

1. v-for 로 map이나 forEach 역할을 할 수 있다.

<Card
    v-for="person of people"
	v-bind:key="person.id"
    v-bind:name="person.name"
    v-bind:hobby="person.hobby"
  />

2. Card 컴포넌트 구현

 const Card = {
  props: {
    name: String,
    hobby: String,
  },
  template: `
    <h1>{{ name }}</h1>
    <h2>{{ hobby }}</h2>
  `,
};

3. 부모App에서 Card 컴포넌트 사용

const App = {
  data() {
    return {
      people: [
        {
          id: 1,
          name: 'Wendy',
          hobby: '자전거',
        },
        {
          id: 2,
          name: '박유진',
          hobby: '노래',
        },
        {
          id: 3,
          name: '한수빈',
          hobby: '독서',
        },
      ],
    };
  },
  components: {
    Card,
  },
  methods: {
    addPerson() {
      this.people.push({
        id: 4,
        name: '장원영',
        hobby: '춤',
      });
    },
  },
};

[전체 예시 코드]

<!DOCTYPE html>
<html>
  <head>
    <title>Example 05</title>
  </head>
  <body>
    <div id="app">
      <Card
        v-for="person of people"
        v-bind:name="person.name"
        v-bind:hobby="person.hobby"
      />
    </div>
  </body>

  <script src="https://unpkg.com/vue"></script>
  <script>
    const Card = {
      props: {
        name: String,
        hobby: String,
      },
      template: `
        <h1>{{ name }}</h1>
        <h2>{{ hobby }}</h2>
      `,
    };

    const App = {
      data() {
        return {
          people: [
            {
              id: 1,
              name: 'Wendy',
              hobby: '자전거',
            },
            {
              id: 2,
              name: '박유진',
              hobby: '노래',
            },
            {
              id: 3,
              name: '한수빈',
              hobby: '독서',
            },
          ],
        };
      },
      components: {
        Card,
      },
      methods: {
        addPerson() {
          this.people.push({
            id: 4,
            name: '장원영',
            hobby: '춤',
          });
        },
      },
    };
    Vue.createApp(App).mount('#app');
  </script>
</html>

[실행 결과]