Como atualizar o item da lista | Fórum | School of Net

Deseja poder participar de nosso fórum e tirar todas as suas dúvidas?
Clique aqui e assine nosso plano de acesso ilimitado. Saiba mais.

por Romulo

2 semanas, 1 dia atrás Romulo

Como atualizar o item da lista

Tem um retorno do broadcast com o item atualizar, no caso os dados dele. Quero que o vue atualize em todas as telas que recebem o evento do Broadcast. Como fazer isso? Recendo o Broadcast, no ele recebe o item do broadcast ``` <template> <div> <div v-for="(auction, key) in auctions_list" :key="key" class="col-md-3 col-xs-6" > <!-- <div :id="`loading-${auction.id}`" style="display: none">--> <!-- <Loading />--> <!-- </div>--> <div class="product" :id="`product-${auction.id}`"> <div class="product-img"> <img :src="auction.media" alt="" /> </div> <div class="product-body"> <p class="product-category"> Inicio {{ dateFormat(auction.date_start) }} </p> <h3 class="product-name"> <a :href="'/auction/details/' + auction.slug" class="btn">{{ auction.name }}</a> </h3> <h4 class="product-price">R$ {{ auction.amount_start }}</h4> <p class="text-capitalize font-weight-bold"> {{ getNameLastBid(auction) }} </p> <div> <CountDownComponent :start="auction.start_count" :time="auction.regressive_time" @finish="finishAuction(auction.slug)" /> </div> </div> <div class="add-to-cart"> <form @submit.prevent="sendBid(auction)"> <button class="add-to-cart-btn"> <i class="fa fa-gavel"></i>Lance </button> </form> </div> </div> </div> </div> </template> <script> import moment from "moment"; import CountDownComponent from "../../countdown/components/Countdown"; // import Loading from "../../loading/Loading"; export default { components: { CountDownComponent, // Loading, }, props: [ // ], data() { return { // loading: false, auctions_list: [], logged: window.user || {}, // user logado }; }, methods: { getNameLastBid(auction) { if (auction.logs.length == 0) { return "Nenhum lance enviado"; } return auction.logs[0].client.name; }, dateFormat(value) { return moment(String(value)).format("DD/MM/YYYY HH:mm:ss"); }, listAuctions() { window.axios .get("/auction/list") .then((response) => { this.auctions_list = response.data.data; }) .catch((error) => { console.log(error); }); }, sendBid(auction) { if (!window.user) { window.location.href = "/my_account/identification"; return; } // this.toggleDisplayElement(`loading-${auction.id}`); // this.toggleDisplayElement(`product-${auction.id}`); const slug = auction.slug; window.axios .post(`/auction/${slug}/send-bid`) .then(() => { // this.toggleDisplayElement(`loading-${auction.id}`); // this.toggleDisplayElement(`product-${auction.id}`); this.listAuctions(); }) .catch((error) => { // this.toggleDisplayElement(`loading-${auction.id}`); // this.toggleDisplayElement(`product-${auction.id}`); console.log(error); }); }, finishAuction(slug) { window.axios.post(`/auction/${slug}/finished`).then(() => { this.listAuctions(); }); }, toggleDisplayElement(element) { var yourUl = document.getElementById(element); yourUl.style.display = yourUl.style.display === "none" ? "" : "none"; }, }, mounted() { this.listAuctions(); Echo.channel("send.bid").listen("SendBidBroadcast", (e) => { console.log("SendBidBroadcast", e.auction); }); }, }; </script> <style> </style> ```

9 Respostas