在我的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为真时，我可以使用某个计数器变量递增行，何时将此计数器变量设置为零？
或者可以通过其他方式完成？
谢谢！
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>
答案 0 :(得分：2)
假设您正在为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
}
}