v-for 루프 및 키 속성 사용

v-for 루프 및 키 속성 사용

제목에 좀 더 적절한 프레임을 씌울 수 없었다. 죄송합니다만...

• 내 데이터 속성에 [ ]가 있어 외부 API에서 호출된 항목으로 채워짐

• I loop through the [ ] 를 사용하여v-for내 템플릿의 메인 디브에 페이지를 채운다.

• 모든 메인 디브에는 기본적으로 숨겨져 표시 여부를 전환할 수 있는 전환 가능한 디브가 있다.

여기 규칙이 있다.

<template>

  <div>    
      // MAIN DIV
      <div v-for="(item, index) in myArray :key="index"> 
          //populate the elements using revelevant data
        <button @click="toggleDiv"">show/hide</button>

        //togglelable div
           <div v-if="displayDiv">
            //some data
        </div>
      </div>
  </div>
</template>

<script>
    export default{
        data(){
            return{
                myArray: [],
                displayDiv: false
            }
        },
        methods: {
            toggleDiv(){
                this.displayDiv = !this.displayDiv;
            }
        }

    }
</script> 

그래서 내 문제가 있다.

• 내가 숨겨진 div를 보여주기 위해 특정 div의 버튼을 클릭할 때, 나머지 모든 div의 숨겨진 div도 표시되고 있다.

• 각 숨겨진 div의 버튼을 클릭했을 때 각 div만 토글되도록 이 작업을 어떻게 제한하는가?

• 사용할까keyvue가 div를 구별하게 하기 위한 속성 또는 나는 어떤 논리라도 사용해야 한다.

키와 값의 이름을 이렇게 남겨야 하니 이름을 바꾸지 마십시오.

<div v-for="(value, key, index) in Your-object">
  {{ index }}. {{ key }}: {{ value }}
</div>

여기서 문제는 div, displayDiv, its not per item. div, display div를 열 때 하나의 속성이 true 또는 false라는 것이다.

    data(){
        return{
            myArray: [],
            displayDiv: false
        }
    }

원격 위치에서 수신하는 배열의 데이터 항목을 수정할 수 없는 경우, 일단 수신한 모든 항목에 해당 항목을 반복하고 속성을 추가하면 된다.

다음과 같은 경우:

// I'll assume your api looks somewhat like this

 return axios.get('apirequest')
.then(function (res) {

// Create a new list 
var listOfItemsWithAddedProp = [];

// Loop all the items of the response..
for(var item of res.data){

    // ..and add one or multiple props
    item.open = false;

    // Then push modified item to the new list
    listOfItemsWithAddedProp.push(item);
}

// Return or set the new list to your "myArray" in your example
return listOfItemsWithAddedProp;

})

개별 항목에 대한 새 구성요소를 만들고, 해당 항목을 표시하거나 표시하지 않는 동작을 캡슐화하십시오.

주 구성 요소:

<template>

    <div v-for="item in myArray"> 
     <item :item=item>
    </div>
    ...

</template>

<script>

    import Item from './Item.vue'
    ...
    export default{
      components: {
        Item
      }
    }

</script>

항목 구성 요소:

<template>
  <div>
     <button @click="toggleDiv()"">show/hide</button>
     <div v-if="displayDiv">
      ...
     </div>
  </div>
</template>



 <script>
    export default{
        props: ['item']
        data(){
            return{
                displayDiv: false
            }
        },
        methods: {
            toggleDiv(){
               this.displayDiv = !this.displayDiv;
            }
        }
    }
 </script>

 <div v-for="(langue, index) in langues" :key="index" >
    {{langue.text}}
 </div>

참조URL: https://stackoverflow.com/questions/43471388/v-for-loop-and-use-of-key-attribute