использование методов в цикле v-for
При использовании методов в цикле v-for метод isFirstMessageToMaster выполняется дважды, хотя в messages всего один элемент:
<ul class="ks-items" v-for="message in messages"
v-bind:key="message.message_id">
<div v-if="isFirstMessageToMaster(message)">
{{ message }}
</div>
</ul>
Код метода isFirstMessageToMaster:
isFirstMessageToMaster(message){
let isFirst = false
axios
.get(config['host_addres'] + "/api/firstmessagetoMaster/" + message.message_id)
.then(response => {
if (response.data) {
this.getMaster(message.master_id)
isFirst = true
}
}
)
return isFirst
Не знаю, как решить проблему. Надо проверять запросом к бд условие и у первого сообщения выводить дополнительную информацию. Использую vuex для хранения данных. Как я понимаю vue не успевает заменить новый список для v-for и метод isFirstMessageToMaster и метод используется сначала для старого списка, затем для нового
вот весь код компонента
export default {
name: 'MessengerComponent',
data() {
return {
user: this.$store.getters.CURENT_USER,
masters_list: []
}
},
methods: {
dd: ()=>{
console.log('debug')
return 1
},
getFormatDate: function (date) {
date = new Date(date)
return date.getDate() + "." + date.getMonth() + 1 + "."
+ date.getFullYear() + " " + date.getHours() + ":" + date.getMinutes()
},
getMaster: function (master_id) {
axios
.get(config['host_addres'] + "/api/master/" + master_id)
.then(response => {
this.$data.masters_list.push( response.data)
}
)
},
isFirstMessageToMaster(message){
console.log('dddd')
let isFirst = false
axios
.get(config['host_addres'] + "/api/firstmessagetoMaster/" + message.message_id)
.then(response => {
if (response.data) {
this.getMaster(message.master_id)
isFirst = true
}
}
)
return isFirst
}
},
computed: mapState({
curent_user: state => state.curent_user,
curent_userAlias: 'user',
messages: state => state.messages
}),
watch: {
curent_user(newValue) {
// Вы можете выполнить обработку изменения здесь
this.$data.user = newValue
this.masters_list = []
this.$store.dispatch('UNSUBSCRIBE_MESSAGES');
this.$store.dispatch('GET_MESSAGES_STREAM', newValue.client_id);
}
},
mounted() {
// axios
// .get(config['host_addres'] + '/api/getfirstmessage/'+ this.user.client_id +'/'+this.user.last_message.master+'')
// .then(response => (console.log(response.data)));
this.$store.dispatch('GET_MESSAGES_STREAM', this.user.client_id);
},
onUnmounted() {
this.$store.dispatch('UNSUBSCRIBE_MESSAGES');
}
}
Код vuex хранилища
import Vuex from 'vuex';
import axios from 'axios';
import config from '@/config';
export const store = new Vuex.Store({
state: {
users: null,
curent_user: null,
messages: null,
messages_listener: (event, context)=>{ let data = JSON.parse(event.data);
context.commit('SET_MESSAGES', data);},
event_sourse: null
},
getters: {
USERS: state => {
return state.users;
},
CURENT_USER: state => {
return state.curent_user;
},
MESSAGES: state => {
return state.messages;
},
},
mutations: {
SET_USERS: (state, payload) => {
state.users = payload;
},
SET_CURENT_USER: (state, payload) => {
state.curent_user = payload;
},
SET_MESSAGES: (state, payload) => {
state.messages = payload;
},
},
actions: {
GET_USERS: async (context) => {
axios
.get(config['host_addres'] + '/api/users/')
.then(response => (context.commit('SET_USERS', response.data)));
},
GET_USERS_STREAM: async (context) => {
let es = new EventSource(config['host_addres'] + '/api/stream/users/');
es.onopen = function (event) {
console.log("conneted", event)
}
es.addEventListener('message', event => {
let data = JSON.parse(event.data);
context.commit('SET_USERS', data);
}, false);
},
GET_MESSAGES_STREAM: async (context, id) => {
context.state.event_sourse = new EventSource(config['host_addres'] + '/api/stream/user/' + id + '/messages/');
context.state.event_sourse.onopen = function (event) {
console.log("conneted to messages", event)
}
context.state.event_sourse.addEventListener('message', event => {
context.state.messages_listener( event, context)
}, false);
},
UNSUBSCRIBE_MESSAGES: async (context) =>{
if (context.state.event_sourse) {
context.state.event_sourse.close(); // закрываем соединение с сервером
context.state.event_sourse = null; // сбрасываем переменную объекта
}
}
},
});
Ответы (1 шт):
В общем я понял, что сильно намудрил на фронтенде и сам запутался. Пошел длинным путем и вынес всю логику в бэк. Теперь в message у меня есть поле для проверки на первое сообщение и поле с мастером.