>source

동적으로 전달된 소품에 조건부 렌더링을 추가하려고 합니다. 라는 구성 요소가 있습니다.card-item.vue소품을 전달하는 것CTA구성 요소에프로필.뷰. 지금에프로필.뷰나는 소품을 원한다CTA에 표시하기 위해카드 아이템첫 번째를 제외한 구성 요소.

여기 내card-item.vue:

<template>  <span v-if="cta">    {{ cta }}
  </span></template><script>export default {
  name: 'card-item',
  props: {
    cta: {
      type: String
    }
  }
}
</script>

profile.vue:

<template>    <CardItem
        v-for="address in addresses.slice(1)"
        :key="uniqueKey('address', address)"
        :cta="cms.page.cta" //remove cta from the first address only
    /></template><script>import CardItem from "./card-item";
const data= require('./profile.json');
export default {
  name: 'profile',
  comonents: {
    CardItem,
  },
  props: {
    cms: {
      type: Object,
      default: ()=> {
        return {
          page: data
        }
      }
    }
  }
}
</script>

프로필.json:

{
  "cta": "Report"
}

< 카드 아이템 /> 주소를 렌더링하고 있습니다. 그래서 나는 내 것을 원한다:cta첫 번째 주소를 제외한 모든 주소에서

다음과 같은 것을 시도했습니다.v-if="addresses[0] ? {cta="null"} : "cms.page.cta""이것이 잘못된 구문이라는 것을 알고 있지만 어느 정도 달성하려고 합니다.

도움을 주시면 감사하겠습니다.

  • 답변 # 1
    <블록 인용>

    v-for는 인덱스에 대한 선택적 두 번째 인수도 지원합니다. 현재 항목. -- 뷰 문서

    <CardItem
        v-for="(address, index) in addresses.slice(1)"
        :key="uniqueKey('address', address)"
        :cta="index !== 0 ? cms.page.cta : null" //remove cta from the first address only
    />

  • 이전 c++ : 출력에서 숫자 1 앞에 있는 PERIOD를 어떻게 제거합니까?
  • 다음 java : 배열에서 정수 목록의 최소 합과 최대 합 찾기