vue - for 'in'

v-for 에 대해서 짧게 다루어 봤다.
v-if처럼 js와 같이 작동한다.
react와 달리 vue가 이러한 부분이 굉장히 편하다고 느껴진다.
먼저 goals라는 배열에 addgoals를 추가해주는 methods를 만들고

const app = Vue.createApp({
  data() {
    return {
      goals: [],
      addgoals: "",
    };
  },
  methods: {
    clickAddGoals() {
      this.goals.push(this.addgoals);
    },
  },
});

app.mount("#user-goals");

html에 적용을 시킨 모습이다.

 <h1>Vue Course Goals</h1>
    </header>
    <section id="user-goals">
      <h2>My course goals</h2>
      <input type="text" v-model="addgoals" />
      <button @click="clickAddGoals">Add Goal</button>
      <p v-show="goals.length === 0">
        No goals have been added yet - please start adding some!
      </p>
      <ul v-show="goals.length > 0">
        <li v-for="(hello,index) in goals">{{ hello }} - {{ index }}</li>
      </ul>

v-for="name in data" {{name}} 식으로 사용한다.
위 코드를 작동시키면
위처럼 goals의 내용들을 받아 for문의 hello에 추가시키게 되고, 추가로 index까지 붙였기에 순서도 알 수 있게 되었다.

v-for의 경우, 객체나 숫자 등 여러 곳에 루프를 걸 수가 있다고 한다.
기본적인 틀은 v-for"(key, value, index) in data" {{key}}-{{value}}-{{index}} 이정도 인 것 같다.

아래 사진은 여러가지 넣어보면서 공부한 것이다.

+++
위 아이템들을 삭제하는 기능도 구현하였다.
삭제하는 기능구현은 기본적인 것이기도하고, 새로운 내용이 아니기에 여기에 짧막하게 적는다.
removeGoals라는 method 함수를 만들고 splice(index,1)을 통해 제거했다.
v-for에서 사용했던 index를 받아서 삭제하는 방법으로 구현했다.

정리

• v-for도 js의 for처럼 작동한다. 주로, 루프를 걸 때 사용
• 기본 틀은 v-for"(key, value, index) in data" {{key}}-{{value}}-{{index}} .
  객체는 물론 숫자 등도 루프를 걸 수 있다.

React에서 사용해본적 없는 Vue의 기능을 사용해볼 때의 재미가 쏠쏠하다.
위 내용 및 앞으로의 공부법을 계속해서 기록해나갈 깃을 하나 만들었다.

https://github.com/Aaron-Kim33/masterthevue