vue 에서 Map을 추가하는 예시

Vue.js에서 Map을 사용하여 데이터를 추가하는 방법은 기본 JavaScript의 Map 객체를 Vue.js 데이터에 저장하는 것과 관련됩니다. Vue.js는 기본적으로 JavaScript 객체 및 배열과 함께 사용되지만, Map 객체도 사용 가능합니다.

아래는 Vue.js 데이터에 Map을 추가하는 예시입니다:

HTML:

<div id="app">
  <ul>
    <li v-for="item in items" :key="item[0]">{{ item[0] }}: {{ item[1] }}</li>
  </ul>
  <button @click="addItem">Add Item</button>
</div>

Vue.js:

new Vue({
  el: "#app",
  data: {
    items: new Map([
      ['apple', 1],
      ['banana', 2],
      ['orange', 3]
    ])
  },
  methods: {
    addItem() {
      this.items.set('grape', 4);
    }
  }
});

위의 코드에서 Vue.js의 'data' 속성에 'items'라는 Map 객체를 선언하고, 초기 값으로 세 가지 과일(key-value 쌍)을 포함시켰습니다. 그런 다음 'addItem' 메서드를 정의하여 Map에 새로운 과일 'grape'를 추가하고 있습니다.

'v-for' 디렉티브를 사용하여 'items' Map의 각 항목을 반복하고 출력하고 있습니다.
'v-for'는 Map에 대해서도 사용할 수 있으며, 'v-for'에서 반복되는 각 항목은 '[key, value]' 배열로 나타납니다.

위의 코드에서 'Add Item' 버튼을 클릭하면 'grape: 4'라는 항목이 리스트에 추가되고 나타나게 됩니다.

이처럼 Vue.js에서 Map을 사용하여 데이터를 추가하는 방법은 일반적인 JavaScript의 Map 객체를 활용하는 방식과 매우 유사합니다. Map은 키-값 쌍을 다루는데 유용하며, Vue.js와 함께 사용하면 동적으로 데이터를 관리하는 데 유용합니다.