동적으로 생성된 요소에 다양한 클래스 추가

Question

각 개체에 textValue, 활성, 정보 등이 있는 개체 배열이 있습니다. 이 배열을 반복하여 각 요소에 대한 버튼을 표시하겠습니다. 내부의 각 버튼에 대해 div를 추가하고 3개의 단락 내에 클래스를 추가하고 조건에 따라 각 버튼에 일부 단락을 표시하려고 합니다. 버튼에 이벤트를 추가하고 ID를 전달하여 활동을 true로 설정하고 각 ID에 대한 정보를 표시합니다. 버튼을 클릭하면 활성 클래스가 생성되고 수량이 표시됩니다. 외부를 클릭하거나 버튼 자체가 클래스와 수량을 제거합니다(p). 버튼을 클릭하면 정보가 열리고 여기에 버튼이 있고 클릭하면 div 정보가 표시됩니다. 숨김(이미 수행했습니다), 클래스를 표시하고 단락을 표시하고 싶습니다. 이에 대한 조건을 사용하지만 수행할 수 없습니다. 코드는 다음과 같습니다.

으아악

버튼을 클릭하고 객체의 활성이 true로 설정된 경우의 기능

으아악

다양한 텍스트 값의 배열이 있습니다

으아악

다른 구성 요소에서는 참조를 제공하고 거부하여 선택한 필터(selectedFilter)를 전달하고 있습니다. 여기에는 함수가 있으며 클릭하면 버튼이 활성 상태로 유지되고 optionButtonValue 또는 기타 항목을 기반으로 단락을 표시하지만 그대로 유지하고 싶습니다. active, 여기에서는 각 버튼의 정보를 숨기기 위해 활동을 false로 전달합니다

<button 
  v-for="filter in addedFilters" 
  :key="filter" 
  :value="filter.textValue" 
  @click="(e) => {openInfoFiltro(filter, e)}" 
  :class="{'filter-active': filter.active && !optionButtonValue.includes(filter.textValue),  'active-filter-options': filter.active && optionButtonValue.includes(filter.textValue)}">
      <div>
         <p v-if="filter.active && filter.textValue !== 'Uso de suelo' && filter.textValue !== 'Amenidades' && filter.textValue !== 'Clasificación de la tierra' & filter.textValue !== 'Vocaciones'" class="m-0">
           {{ $filters.numeralFormatBtnInfo(filter.info[0]) }} - {{$filters.numeralFormatBtnInfo(filter.info[1]) }}
         </p>

         <p v-else-if="filter.active || filter.textValue === 'Uso de suelo' && filter.textValue === 'Amenidades' && filter.textValue === 'Clasificación de la tierra' && filter.textValue === 'Vocaciones'" class="m-0 amount"> 
             <span v-if="filter.info">({{filter.info === 0 ? '' : filter.info }})</span>
         </p>

         <p class="m-0">{{filter.textValue}}</p>
      </div>
  </button>

Answer 1

사실 v-if에는 참과 거짓만이 당신을 기다리고 있습니다. 그러나 텍스트 정의에서는 v-if를 사용합니다. 이것은 정확하지 않습니다. 먼저 v-if="{filter.active || filter} "와 같이 조건부로만 v-if를 변경할 수 있습니다. 또한 p 태그에 정의 변경 텍스트 {{ filter.active && ' bla bla를 직접 입력할 수도 있습니다. ' }}