vue에서 속성을 계산할 때 v-for가 배열을 처리할 때 발생하는 버그에 대한 자세한 설명

이 글은 주로 vue 계산 속성과 v-for 처리 배열을 수행할 때 발생하는 버그 문제를 소개합니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

문제

버그: 구성 요소 렌더링 함수 무한 루프

1에 무한 업데이트 루프가 있을 수 있습니다(** ssq **에서):

bonus_code: ['01', '19', '25', '26', '27', '33', '10']

2.

ssqRed: function() {
return this.ssq.bonus_code.splice(0, 6)
},
ssqBlue: function() {
return this.ssq.bonus_code.splice(6, 7)
}

3.v-for 코드:

<em class="red-ball tac mr5 fl" v-for="(item, index) in ssqRed">{{ item }}</em>
<em class="blue-ball tac mr5 fl" v-for="(item, index) in ssqBlue">{{ item }}</em>

4. 최종 결과는 배열의 처음 6개 숫자를 빨간색 공으로 렌더링하고 마지막 숫자(즉, 7번째 숫자)를 빨간색 공으로 렌더링하려는 것입니다. 파란색.

Answer

SegmentFault에 대한 질문을 했습니다. 주소: vue 계산 속성 계산은 동시에 배열을 작동합니다

답변을 수락하고 코드를 다음으로 변경했습니다.

ssqRed: function() {
 return this.ssq.bonus_code.slice(0, 6)
},
ssqBlue: function() {
 return this.ssq.bonus_code.slice(6, 7)
}

문제는 내가 그렇게 하지 않았다는 것입니다. 스플라이스가 원래 어레이에 어떤 영향을 미칠지 이해하지 못합니다.

해결책을 찾을 때 친구 Shaohui가 더 나은 해결 방법을 가르쳐 주었습니다. 정말 감사합니다

즉, 클래스 이름 판단

1. 배열의 크기를 알면 클래스 이름 판단을 하고, 인덱스는 가능한 한 파란색 클래스 이름을 표시합니다.

<em v-for="(item, index) in ssq.bonus_code" :class="[&#39;tac&#39;,&#39;mr5&#39;,&#39;fl&#39;,index>5?'blue-ball':'red-ball']" >{{ item }}</em>

3. 추가된 코드:

index>5?'blue-ball':'red-ball'

v-for는 테이블 생성을 구현합니다. 일련번호 방식 추가

위 내용은 vue에서 속성을 계산할 때 v-for가 배열을 처리할 때 발생하는 버그에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!