[vue.js] v-for로 배열을 출력하고, 해당 index만 수정하는법 질문있습니다!.

조회수 53회
<template>
  <div>
    <ul>
      <li v-for="(item,index) in items" :key="item">

        <span v-if="!itemStat">
          {{ item }}
          <button @click="editItem()">Edit</button>
        </span>

        <span v-else>
          <input type="text" :placeholder="item" v-model="newItem">
          <button @click="updateItem(index)">update</button>
        </span>

      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['red','blue','green'],
      itemStat: false,
      newItem: ''
    }
  },
  methods: {
    editItem() {
      this.itemStat = !this.itemStat
    },
    updateItem(index) {
      this.itemStat = !this.itemStat
      this.items[index] = this.newItem
    }
  }
};
</script>

이미지

<질문> Edit 버튼을 눌렀을때 인풋 박스가 선택한 인덱스만 적용되게 하려면 어떻게 해야할까요?

이미지

수정은 되지만 아래 사진과같이..v-model이 모든 인풋박스에서 적용되고있습니다.

이미지

수정완료 > 이미지

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.