v-for 목록의 show element:VueJS

v-for 목록의 show element:VueJS

이 질문에는 이미 답이 있습니다.

Vue.js - 클릭된 버튼에 클래스 추가 (1개의 답변)

닫힘2년 전에요.

모든 항목을 표시하는 v-가 있고 각 항목에 대한 패널(수정 및 삭제)이 있지만 이 버튼을 클릭하여 패널을 표시하면 모든 항목에 표시됩니다.어떻게 하면 피할 수 있을까요?마찬가지로 modify 버튼을 클릭하면 아이템을 수정하기 위한 입력이 각 요소에 표시됩니다.

내 코드가 있습니다.

<div v-for="(comment, index) in comments" :list="index" :key="comment">
   <div v-on:click="show = !show">
      <div v-if="show">
         <button @click="edit(comment), active = !active, inactive = !inactive">
            Modify
         </button>
         <button @click="deleteComment(comment)">
            Delete
         </button>
      </div>
   </div>
   <div>
      <p :class="{ active: active }">
        {{ comment.content }}
      </p>
      <input :class="{ inactive: inactive }" type="text" v-model="comment.content" @keyup.enter="doneEdit">
   </div>
</div>

방법 및 데이터:

data() {
  return {
    show: false,
    editing: null,
    active: true,
    inactive: true
  }
},

methods: {
   edit(comment) {
     this.editing = comment
     this.oldComment = comment.content
   },

   doneEdit() {
     this.editing = null
     this.active = true
     this.inactive = true
   }
}

너도 마찬가지야show,editing,active,inactive모든 항목에 대해 기술합니다.따라서 한 항목에 대한 데이터 속성을 변경하면 모든 항목에 대해 변경됩니다.당신이 원하는 것을 성취할 수 있는 많은 방법들이 있다.

가장 쉬운 방법은 인덱스별로 데이터를 관리하는 것입니다.예를 들어 다음과 같습니다.

<div v-on:click="showIndex = index">
  <div v-if="showIndex === index">
  ...
data () {
  return {
    showIndex: null
  ...

이 접근법의 주요 문제점은 한 번에 하나의 항목만 표시/편집할 수 있다는 것입니다.좀 더 복잡한 논리와 여러 아이템을 관리할 필요가 있는 경우 아이템에 대해 개별 컴포넌트를 생성하여 각각의 상태를 유지하는 것이 좋습니다.show,editing등)

@NaN의 어프로치는, 한 번에 1개만 여는 경우에 유효합니다.여러 요소를 동시에 열 수 있도록 하려면 각 요소를 추적해야 합니다.지금 너는 단지 그것을 기반으로 하고 있다.show.그것밖에 할 수 있다.true/false모든 요소를 동시에 사용할 수 있습니다.

필요한 것은 다음과 같습니다.

바꾸다show부울에서 배열로

data() {
  return {
    show: [],
    editing: null,
    active: true,
    inactive: true,

  }
},

그런 다음 패널이 있어야 하는 요소를 추적할 수 있습니다.

<div v-on:click="toggleActive(index)">

방법은 다음과 같습니다.

methods: {
   toggleActive(index) {
      if (this.show.includes(index)) {
        this.show = this.show.filter(entry => entry !== index);

        return; 
      }

      this.show.push(index);
   }
}

그리고 마지막으로 너의v-if다음과 같이 됩니다.

<div v-if="show.includes(index)">

언급URL : https://stackoverflow.com/questions/59582624/show-element-in-v-for-list-vuejs