我有一个对象数组,其中每个对象都有一个 textValue、一个 active、info 等。我将遍历这种排列并显示每个元素的按钮。对于里面的每个按钮,我添加一个 div,在 3 个段落中,我尝试添加类并按条件向每个按钮显示一些段落。我向按钮添加一个事件并向其传递一个 id,这样我将活动设置为 true 并显示信息,这针对每个不同的 id。单击按钮会创建一个活动类并显示数量,单击外部或按钮本身会消除类和数量(p),当我单击按钮时,信息会打开,这里我有一个按钮,单击时,div信息被隐藏(我已经这样做了),我想保持类可见和段落可见,我为此使用条件,但我做不到,这是代码:
<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>
单击按钮并将对象的 active 设置为 true 时的函数
const openInfoFiltro = (id,e) => { selectedFilter.value = addedFilters.value.find(val => val.textValue === id.textValue); console.log(selectedFilter.value) if(selectedFilter.value){ selectedFilter.value.active = !selectedFilter.value.active } }
我有不同文本值的数组
const optionButtonValue = ['Uso de suelo', 'Amenidades', 'Clasificación de la tierra', 'Vocaciones' ]
在另一个组件中,我通过提供和拒绝引用,在其中传递选定的过滤器(selectedFilter),这里我有一个函数,当单击时,我希望按钮保持活动状态,并根据 optionButtonValue 显示一个段落或其他,但保持其活动状态,在这里我将活动传递给 false 以隐藏每个按钮的信息
const showResults = () => { console.log('Mostrar resultados') landsStore.lands = [] landsStore.landsadd = [] selectedFilter.value.active = false landsStore.fetchLands('', { filters: filtersStore.getAllFiltersAlgoliaFormat, facetFilters: filtersStore.getAllFacetFilterFormat }) }
事实上,v-if 等待你的只有 true 和 false。但你在 v-if 文本定义中使用。这是不正确的。首先,您可以仅有条件地更改 v-if,如 v-if="{filter.active || filter} " 也在您的 p 标记中,您可以直接键入定义更改文本 {{ filter.active && 'bla bla' }}