Javascript Vue.js嵌套用于带有搜索筛选器的循环
我有一个带有嵌套对象的JSON对象,我正在迭代该对象以提取数据。一切正常,但我想添加一个搜索/过滤器实现,以便在嵌套的Javascript Vue.js嵌套用于带有搜索筛选器的循环,javascript,json,vue.js,search,filter,Javascript,Json,Vue.js,Search,Filter,我有一个带有嵌套对象的JSON对象,我正在迭代该对象以提取数据。一切正常,但我想添加一个搜索/过滤器实现,以便在嵌套的for循环的第二级上执行搜索。我有一些工作,但我没有得到任何数据返回。以下是一个例子: 在HelloWorld组件中,执行搜索/筛选。 正如您所看到的,它在通过searchFilter方法后不会输出其余的数据 要使其在不使用搜索/筛选的情况下工作,请更改第6行的以下内容: 发件人: 收件人: 任何人都能想到我能做些什么来让这一切顺利进行?我需要按主数据对象中每个内容中的元素进行
for
循环的第二级上执行搜索。我有一些工作,但我没有得到任何数据返回。以下是一个例子:
在HelloWorld组件中,执行搜索/筛选。
正如您所看到的,它在通过searchFilter方法后不会输出其余的数据
要使其在不使用搜索/筛选的情况下工作,请更改第6行的以下内容:
发件人:
收件人:
任何人都能想到我能做些什么来让这一切顺利进行?我需要按主数据对象中每个内容中的元素进行过滤。您可以在FauxData/dataContent.js
dir中找到数据对象
非常感谢
-S您应该使用方法而不是计算:
methods: {
filterValue(content) {
return content.filter(item => {
let itemUpper = item.content.toUpperCase();
let searchUpper = this.search.toUpperCase();
return itemUpper.indexOf(searchUpper) > -1;
});
}
}
然后在HTML代码中:
<section id="content">
<input type="text" id="search" name="search" v-model="search" placeholder="Search Content...">
<div v-for="(cont, index) in content" :key="index" class="contentWrapper">
<h1>{{ index }}</h1>
<div class="contentSingle" v-for="(c, i) in filterValue(cont)" :key="i">
<h3>{{ c.title }}</h3>
<div v-html="c.content"></div>
</div>
</div>
</section>
在外部v-for中使用filteredData
<section id="content">
<input type="text" id="search" name="search" v-model="search" placeholder="Search Content...">
<div v-for="(cont, index) in filteredData" :key="index" class="contentWrapper">
<h1>{{ index }}</h1>
<div class="contentSingle" v-for="(c, i) in cont" :key="i">
<h3>{{ c.title }}</h3>
<div v-html="c.content"></div>
</div>
</div>
</section>
{{index}}
{{c.title}}
演示您应该使用方法而不是计算:
methods: {
filterValue(content) {
return content.filter(item => {
let itemUpper = item.content.toUpperCase();
let searchUpper = this.search.toUpperCase();
return itemUpper.indexOf(searchUpper) > -1;
});
}
}
然后在HTML代码中:
<section id="content">
<input type="text" id="search" name="search" v-model="search" placeholder="Search Content...">
<div v-for="(cont, index) in content" :key="index" class="contentWrapper">
<h1>{{ index }}</h1>
<div class="contentSingle" v-for="(c, i) in filterValue(cont)" :key="i">
<h3>{{ c.title }}</h3>
<div v-html="c.content"></div>
</div>
</div>
</section>
在外部v-for中使用filteredData
<section id="content">
<input type="text" id="search" name="search" v-model="search" placeholder="Search Content...">
<div v-for="(cont, index) in filteredData" :key="index" class="contentWrapper">
<h1>{{ index }}</h1>
<div class="contentSingle" v-for="(c, i) in cont" :key="i">
<h3>{{ c.title }}</h3>
<div v-html="c.content"></div>
</div>
</div>
</section>
{{index}}
{{c.title}}
演示您应该在问题中发布相关代码,而不是完全依赖外部链接。这里应该过滤哪些内容,主要项目还是子项目?我知道应该使用子项进行匹配,但这仍然存在歧义。如果单个子项匹配,则应仅显示该子项或整个父项?注意。。。如果子项是匹配项,我希望显示主索引/标签以及特定的标题和内容。您应该在问题中发布相关代码,而不是完全依赖外部链接。这里应该过滤哪些内容,主要项目还是子项目?我知道应该使用子项进行匹配,但这仍然存在歧义。如果单个子项匹配,则应仅显示该子项或整个父项?注意。。。如果子项是匹配项,我希望显示主索引/标签以及特定的标题和内容。谢谢。如何隐藏对象上不属于筛选结果一部分的根/父元素?例如,在代码中,如果使用Four-Two
进行过滤,则会得到最后一个标题内容组合及其根/父“Main-Four”。但是你仍然可以看到其他的根/父/母…我们如何隐藏它们?该方法是否必须在
的第一个循环中执行?谢谢。如何隐藏对象上不属于筛选结果一部分的根/父元素?例如,在代码中,如果使用Four-Two
进行过滤,则会得到最后一个标题内容组合及其根/父“Main-Four”。但是你仍然可以看到其他的根/父/母…我们如何隐藏它们?该方法是否必须在第一个for
循环中执行?