计算与搜索条件匹配的所有行
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了计算与搜索条件匹配的所有行相关的知识，希望对你有一定的参考价值。
在我的Laravel5（v5.5.24）/vue.js2（v2.5.8）/应用程序中，我使用vue过滤器在我的页面上进行过滤，如：
<li v-for="nextUserChatMessage, index in setFiltertUserChatMessages">
...
setFiltertUserChatMessages: function () {
return this.userChatMessages.filter( (user_chat_message) => {
var res= user_chat_message.text.match(this.search_text);
return res;
});
这个过滤器适用于我，但我想计算所有符合搜索条件的行。 如果有办法吗？当var res为true时，我可以使用一些计数器变量递增行，何时将此计数器变量设置为零？
或者它可以通过其他方式完成？
谢谢！
Imre_G，谢谢你的回复！我试着按照你的方式：
<ul >
<li v-for="nextUserChatMessage, index in setFilterUserChatMessages">
<div class="col-xs-12 m-10">
<span class="user_name">{{ nextUserChatMessage.author_name }}</span>,
<span v-if="nextUserChatMessage.updated_at_label">
<small>modified at</small> <span class="timestamp_as_ago_label">{{ nextUserChatMessage.updated_at_label }}</span>
</span>
<span v-else>
<span class="timestamp_as_ago_label">{{ nextUserChatMessage.created_at_timestamp | time_since_label }}</span>
</span>
<div class="col-xs-12">
<span v-html="nextUserChatMessage.text"></span>
<!--| highlight-->
</div>
</div>
</li>
</ul>
<br>:
{{ countFilterUserChatMessages }};;;;;
setFilterUserChatMessages: function () {
return this.userChatMessages.filter((user_chat_message) => {
var res = user_chat_message.text.match(this.search_text);
return res;
});
},
countFilterUserChatMessages: function() {
alert( "countFilterUserChatMessages::"+var_dump(countFilterUserChatMessages) )
return setFilterUserChatMessages.length
},
但我在控制台中出错：
app.js?dt=1513588403:1297 [Vue warn]: Error in render: "ReferenceError: countFilterUserChatMessages is not defined"
found in
---> <UserChatsRun> at resources/assets/js/components/user_chats/UserChatsRun.vue
<Root>
warn @ app.js?dt=1513588403:1297
logError @ app.js?dt=1513588403:2415
globalHandleError @ app.js?dt=1513588403:2410
handleError @ app.js?dt=1513588403:2399
Vue._render @ app.js?dt=1513588403:5152
updateComponent @ app.js?dt=1513588403:3464
get @ app.js?dt=1513588403:3807
run @ app.js?dt=1513588403:3884
flushSchedulerQueue @ app.js?dt=1513588403:3650
(anonymous) @ app.js?dt=1513588403:2515
flushCallbacks @ app.js?dt=1513588403:2436
Promise resolved (async)
microTimerFunc @ app.js?dt=1513588403:2484
nextTick @ app.js?dt=1513588403:2528
queueWatcher @ app.js?dt=1513588403:3737
update @ app.js?dt=1513588403:3874
notify @ app.js?dt=1513588403:1403
reactiveSetter @ app.js?dt=1513588403:1726
proxySetter @ app.js?dt=1513588403:3965
(anonymous) @ app.js?dt=1513588403:61232
Promise resolved (async)
loadUserChatMessagesList @ app.js?dt=1513588403:61230
boundFn @ app.js?dt=1513588403:911
mounted @ app.js?dt=1513588403:61127
callHook @ app.js?dt=1513588403:3591
insert @ app.js?dt=1513588403:4768
invokeInsertHook @ app.js?dt=1513588403:6529
patch @ app.js?dt=1513588403:6748
Vue._update @ app.js?dt=1513588403:3336
updateComponent @ app.js?dt=1513588403:3464
get @ app.js?dt=1513588403:3807
Watcher @ app.js?dt=1513588403:3796
mountComponent @ app.js?dt=1513588403:3468
Vue$3.$mount @ app.js?dt=1513588403:9054
Vue$3.$mount @ app.js?dt=1513588403:11393
(anonymous) @ app.js?dt=1513588403:12276
__webpack_require__ @ app.js?dt=1513588403:20
Object.defineProperty.value @ app.js?dt=1513588403:26489
__webpack_require__ @ app.js?dt=1513588403:20
__webpack_exports__.d @ app.js?dt=1513588403:63
(anonymous) @ app.js?dt=1513588403:66
11:13:24.646 app.js?dt=1513588403:2419 ReferenceError: countFilterUserChatMessages is not defined
at VueComponent.<anonymous> (app.js?dt=1513588403:61173)
at VueComponent.countFilterUserChatMessages (app.js?dt=1513588403:61164)
at Watcher.get (app.js?dt=1513588403:3807)
at Watcher.evaluate (app.js?dt=1513588403:3914)
at VueComponent.computedGetter [as countFilterUserChatMessages] (app.js?dt=1513588403:4165)
at Object.get (app.js?dt=1513588403:2622)
at app.js?dt=1513588403:61415
at Proxy.renderList (app.js?dt=1513588403:4363)
at Proxy.render (app.js?dt=1513588403:61364)
at VueComponent.Vue._render (app.js?dt=1513588403:5150)
但我没有看到我的语法错误。请你指点一下吗？
以下是文件：
<template>
<section>
<div class="form-group pull-right">
<router-link :to="{name: 'createUserChat'}" class="btn btn-success">Add</router-link>
</div>
<div class="panel panel-default">
<div class="panel-heading">User's chats list RUN</div>
<div v-if="message" class="has_error">
<center>{{ message }}</center>
</div>
<section class="panel-body white-box">
<div class="alert alert-info" v-if="userChatMessages.length === 0">
<span v-if="is_inited">No Data Found</span>
</div>
<div v-else class="p-10">
<div class="row">
<input type="text" class="form-control" v-model="search_text" placeholder="Search in this chat"/>
</div>
<div class="row">
<small class="badge float-right" v-if="typing" :class='badgeClass'>{{ typing }}</small>
<ul >
<li v-for="nextUserChatMessage, index in setFilterUserChatMessages">
<div class="col-xs-12 m-10" v-bind:style="{ 'color':nextUserChatMessage.userProfileValuesArray.color,
'background-color':nextUserChatMessage.userProfileValuesArray.background_color }" >
user_id::{{ nextUserChatMessage.user_id }},
<span class="user_name" >{{
nextUserChatMessage.author_name }}</span>,
<span v-if="nextUserChatMessage.updated_at_label">
<small>modified at</small> <span class="timestamp_as_ago_label">{{ nextUserChatMessage.updated_at_label }}</span>
</span>
<span v-else>
<span class="timestamp_as_ago_label">{{ nextUserChatMessage.created_at_timestamp | time_since_label }}</span>
</span>
<div class="col-xs-12">
<span v-html="nextUserChatMessage.text"></span>
</div>
</div>
</li>
</ul>
{{ countFilterUserChatMessages }}
<div v-if="submit_message_by_enter" class="p-10">
<input type="text" class="form-control" placeholder="Type your message here and press Enter key" v-model="user_chat_new_message"
@keyup.enter='sendNewMessage'>
</div>
<div v-else class="p-10">
<textarea type="text" rows="2" class="form-control" placeholder="Type your message here and press 'Send' button" v-model="user_chat_new_message"></textarea>
<div class="p-t-10">
<a @click='sendNewMessage' class="btn btn-success">Send</a>
</div>
</div>
</div>
</div>
</section>
</div>
</section>
</template>
<script>
import { bus } from '../../app';
export default {
data: function () {
return {
user_chat_new_message: '',
userChatMessages: [],
message: '',
is_inited: '',
appHandling: {},
chat: {
message: [],
user: [],
color: [],
time: []
},
typing : '',
search_text : '',
submit_message_by_enter : true
}
}, // data: function () {
created() {
this.appHandling= new AppHandling(this);
this.app_bus= bus
this.submit_message_by_enter= user_profile_submit_message_by_enter == "Y"
bus.$on('newUserChatAddedEvent', (event) => {
this.userChatMessages.push( {'author_name': event.author_name, 'text': nl2br(event.text), 'created_at_timestamp': this.getNowDateTime()} )
})
},
mounted() {
var app = this;
app.loadUserChatMessagesList(app)
app.is_inited = true
}, // mounted() {
computed:{
setFilterUserChatMessages: function () {
return this.userChatMessages.filter((user_chat_message) => {
var res = user_chat_message.text.match(this.search_text);
return res;
});
},
countFilterUserChatMessages: function() {
return setFilterUserChatMessages.length
},
},
methods: {
sendNewMessage() {
if (this.user_chat_new_message.length > 0) {
console.log(this.user_chat_new_message)
this.app_bus.$emit('newUserChatAddedEvent', {'author_name': 'you', 'text': nl2br(this.user_chat_new_message), 'created_at_timestamp': this.getNowDateTime()} );
axios.post(window.API_VERSION_LINK + '/send', {
message: this.user_chat_new_message
})
.then(function (response) {
app.errorsList= {};
app.userChatMessages = response.data.userChatMessagesList;
})
.catch(function (error) {
alert("error::" + var_dump(error))
console.log(error);
app = app.appHandling.rowEditorClientError(error);
});
this.user_chat_new_message = ''
}
}, // sendNewMessage() {
loadUserChatMessagesList(app, page, order_by, order_direction) {
app.message = '';
if (typeof page == "undefined") page = 1;
if (typeof order_by == "undefined") order_by = "name";
if (typeof order_direction == "undefined") order_direction = "asc";
var user_chat_id = 1
axios.get(window.API_VERSION_LINK + '/user_chat_run?id=' + user_chat_id + "&page=" + page + "&order_by=" + order_by + "&order_direction=" + order_direction)
.then(function (response) {
app.userChatMessages = response.data.userChatMessagesList;
})
.catch(function (error) {
console.log(error);
app = app.appHandling.rowEditorClientError(error);
});
}, // loadUserChatMessagesList(app, page, order_by, order_direction) {
removeUserChat(id, user_chat_name, index) {
var app = this;
app.message = '';
}, // removeUserChat(id, user_chat_name, index) {
}, // methods: {
}
</script>
答案
假设您正在为setFiltertUserChatMessages使用计算变量，最简单的方法是使用第二个计算变量，如下所示：
computed: {
setFiltertUserChatMessages () {
return this.userChatMessages.filter( (user_chat_message) => {
var res= user_chat_message.text.match(this.search_text);
return res;
})
},
countFiltertUserChatMessages () {
return setFiltertUserChatMessages.length
}
}
以上是关于计算与搜索条件匹配的所有行的主要内容，如果未能解决你的问题，请参考以下文章
是否有一种自动方法可以从许多表中删除与给定条件匹配的许多行？
[ jquery 过滤器 parentsUntil([expr|element][,filter]) ] 此方法用于在选择器的基础之上搜索查找当前元素的所有的父辈元素，直到遇到与表达式和限定条件相匹配