VuesJ, v-for 루프에서 랜덤 키 생성

VuesJ, v-for 루프에서 랜덤 키 생성

좋은 저녁입니다.

문제는 다음과 같습니다.간단한 div를 표시하는 루프가 있습니다.div의 dimensiosn을 지정하는 메서드가 있습니다(이 경우 필수).단, div의 크기를 변경하여 메서드를 두 번째로 호출해도 리렌더가 없기 때문에 동작하지 않습니다.

이 문제를 해결하기 위해 다음과 같은 변수를 사용하여 v-for의 내 키에 GUID를 생성합니다.

<div v-for="task in tasks" :key="task.id + guid()">...blabla...</div>

이 코드를 루프 중에 직접 생성하여 연결을 회피할 수 있습니까?

<div v-for="(task, maVar=guid())  in tasks" :key="maVar">...blabla...</div>

PS : guid() 메서드의 코드:

guid() {
   return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
      (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16))
}

감사해요.

GUID가 추가된 작업 배열을 반환하는 계산 속성을 만들거나 작업을 변경하지 않고 그대로 두려면 각 작업과 GUID를 포함하는 개체를 반환할 수 있습니다.

computed: {
  tasksWithGuid: function() {
    return this.tasks.map(task => { return {task, key: task.id + guid() } })
  }
}

<div v-for="taskWithGuid in tasksWithGuid" :key="taskWithGuid.key">
  {{taskWithGuid.task.someProperty}}
</div>

아래에는 보다 간단하고 간결한 기술이 있습니다.중복 속성을 사용하여 반복 개체를 오염시키는 것을 방지합니다.반복하는 개체에 고유한 속성이 없을 때 사용할 수 있습니다.

뷰 모델에서 먼저 랜덤 번호를 생성하는 방법을 추가합니다(예: Lodash 랜덤).

var random = require('lodash.random');

methods: {
    random() {
        return random(1000);
    }
}

그런 다음 템플릿에서 인덱스를 표시합니다.v-for랜덤화해서v-bind:key당신의 것과 함께random()메서드를 뷰 모델에서 연결합니다.

<div v-for="(task, index) in tasks" v-bind:key="index + random()">
    // Some markup
</div>

이것은 매우 깨끗하다.

그러나 이 접근법은 서로 다른 항목만 대체하는 것이 아니라 목록의 각 항목을 강제로 다시 그릴 수 있다는 점에 유의한다.이렇게 하면 변경되지 않은 항목에 대해 이전에 그려진 상태(있는 경우)가 재설정됩니다.

나는 이렇게 해

function randomKey() {
   return (new Date()).getTime() + Math.floor(Math.random() * 10000).toString()
}

언급URL : https://stackoverflow.com/questions/48570163/vuesjs-generate-randomkey-in-v-for-loop