打开时我有一个子Dropdown组件，并且选择了一个值＆＃34;标签＆＃34;作为数组传递回父级。这一切都很好，我得到了这些。
然后我想采用这些标记并将它们与名为Results的数组进行比较。这工作正常我想但是它会检查结果数组中的标签名为＆＃34; wedding＆＃34;，＆＃34; dining＆＃34;，＆＃34; spa＆＃34;它会转到Results数组，如果第一个是＃34; wedding＆＃34;它将活动设置为真，但接下来可能是＃34;健身房＆＃34;这不是一个匹配，所以活动是假的。
希望我能很好地解释我的困境。任何帮助将不胜感激。
<template>
<div>
<div class="profiler">
<div class="in">
<div class="profiler__heading">
<div class="profiler__heading--icon">
<img src="/static/img/svg/profiler-white.svg" />
</div>
<div class="profiler__heading--title">
<h6 class="heading heading--uppercase">TELL US ABOUT YOU AND LET US PERSONALISE YOUR EXPERIENCE</h6>
</div>
</div>
<div class="profiler__form">
<div class="profiler__form--row">
<span>I'm visiting Conrad Algarve for a </span>
<dropdown @menu-tags="menuTags" v-bind:dropdown="visiting"></dropdown>
</div>
<div class="profiler__form--row">
<span>I'm interested in</span>
<!-- Pass down to child a custom event listener called is-menu-visible and assign
to a function called isMenuVisible (See dropdown.vue) -->
<dropdown v-bind:dropdown="interestedOne"></dropdown>
<span>and</span>
<dropdown v-bind:dropdown="interestedTwo"></dropdown>
</div>
</div>
<div class="profiler__options">
<div class="profiler__options--filter">
<a href="#">SHOW MY EXPERIENCES</a>
</div>
<div class="profiler__options--hide">
<a href="#">SKIP. I’D RATHER LOOK AROUND</a>
</div>
</div>
</div>
</div>
<div class="profilerResults">
<div class="box" v-for="result in results" v-if="result.active">{{ result.title }} {{ result.tags }}</div>
</div>
</div>
</template>
<script>
import Dropdown from './ui/Dropdown'
export default {
name: "Profiler",
components: {
'dropdown': Dropdown
},
data() {
return {
currentTags: [],
activeTags: [],
visiting: [{
title: 'Wedding/Vacation',
tags: [
'weddings',
'dining',
'spafitness'
]
},
{
title: 'Holiday',
tags: [
'dining',
'spanfitness',
'experiences',
'poolbeach',
'whatson'
]
},
{
title: 'Special Occasion',
tags: [
'weddings',
'dining',
'spafitness',
'golf',
'whatson',
'experiences'
]
},
{
title: 'Business Trip',
tags: [
'meetingsevents',
'golf'
]
}
],
interestedOne: [{
title: 'What\s On',
},
{
title: 'Family Fun',
},
{
title: 'Relaxing',
},
{
title: 'Exploring',
},
{
title: 'Dining',
},
{
title: 'Meetings & Events',
},
{
title: 'Golf',
}
],
interestedTwo: [{
title: 'What\s On',
},
{
title: 'Family Fun',
},
{
title: 'Relaxing',
},
{
title: 'Exploring',
},
{
title: 'Dining',
},
{
title: 'Meetings & Events',
},
{
title: 'Golf',
}
],
results: [{
title: "Pools & Beach",
slug: 'poolbeach',
tags: [
'relaxing',
'familyfun',
'holidayvacation'
],
active: false
},
{
title: "Kids Club & Games Room",
slug: 'kidsclubgamesroom',
tags: [
'familyfun'
],
active: false
},
{
title: "What's On",
slug: 'whatson',
tags: [
'specialoccasion',
'holidayvacation',
'dining',
'whatson'
],
active: false
},
{
title: "Golf",
slug: 'golf',
tags: [
'specialoccasion',
'business',
'relaxing',
'meetingsevents',
'golf'
],
active: false
},
{
title: "Experiences",
slug: 'experiences',
tags: [
'specialoccasion',
'holidayvacation',
'relaxing',
'dining',
'whatson'
],
active: false
},
{
title: "Spa & Fitness",
slug: 'spafitness',
tags: [
'specialoccasion',
'holidayvacation',
'weddings',
'whatson',
'spafitness'
],
active: false
},
{
title: "Weddings",
slug: 'weddings',
tags: [
'specialoccasion',
'weddings'
],
active: false
},
{
title: "Dining",
slug: 'dining',
tags: [
'specialoccasion',
'holidayvacation',
'weddings',
'dining'
],
active: false
},
{
title: "Meetings & Events",
slug: 'meetingsevents',
tags: [
'business',
'meetingsevents'
],
active: false
}
]
}
},
watch: {
currentTags: function () {
//console.log(this.results);
//this.results;
},
},
methods: {
filterCurrent() {
var self = this;
// var results = this.results;
var activeTags = [];
this.currentTags.tags.filter(function (tag) {
activeTags.push(tag);
this.results.filter(function (result) {
result.tags.some(function (tag) {
if (tag.indexOf(activeTags) != -1) {
result.active = true;
} else {
result.active = false;
}
})
})
}, this)
},
menuTags(label) {
this.currentTags = label;
this.filterCurrent();
},
},
}
</script>
答案 0 :(得分：0)
如果我正确理解您的问题，您想要选择与当前代码共有一个或多个代码的所有结果吗？
为什么不根据您的条件过滤结果，而不是更改结果中的active标记？
this.activeResults = this.results.filter( function(result) {
return result.tags.some(function(tag) {
return tag.indexOf(activeTags) != -1;
});
});
然后只渲染activeResults而不是results。