如何强制将一个Vue组件从另一个组件重新渲染

Question

I have a shopping basket where when I select 'add to basket' from one app I want the basket to live reload. When adding to the basket i'm posting this item to an api. The basket fetch's from this api and renders the data in the basket component.

I'm using an EventBus to tell the basket component that a new item has been added however within my $on function neither $forceUpdate() or making another fetch request re renders the component with the new item.

This is in my item component:

methods: {
submit(e){
  e.preventDefault()
  let data = this.createBasketObject(this.experience)
  fetch('http://localhost:3000/api/basket', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: { 'Content-Type': 'application/json'}
  })
  .then( eventBus.$emit('basket-updated', true))
}

and this is in my basket component:

<template lang="html">
  <div class="">
    <h3>Basket</h3>
    <basket-item
      v-for="item in items"
      :key="item._id"
      :item="item"
    />
    <p>Total: £{{ total}}</p>
  </div>

<script>
import BasketItem from './BasketItem.vue';
import { eventBus } from '../main.js';

export default {
  name: 'basket',
  data(){
    return {
      items: [],
      total: 0
    }
  },
  components: {
    'basket-item': BasketItem
  },
  mounted(){
    fetch('http://localhost:3000/api/basket')
    .then(res => res.json())
    .then(data => this.items = data)
    .then(items => this.calcTotal(items))

    eventBus.$on('basket-updated', (data) => {
      if(data){
        this.$forceUpdate()
      }
    })
  }

I'm essentially trying to do a setState like in React but the basket doesn't update until I refresh the page.

Is there anyway I can do this in Vue without using something like sockets?

Thanks

Answer 1

I think that you need to RELOAD the basket items on new item added, IF you need the 'roundtrip with the server (send the new item to the server, some calcs, back to front-end with the cart updated)'. So: put in a separate method the basket load, call it from the mounted and again on the basket-updated event: This is the shortest answer:

LoadBasket() {
 fetch('http://localhost:3000/api/basket')
    .then(res => res.json())
    .then(data => this.items = data)
    .then(items => this.calcTotal(items));
}

mounted(){
  //The first time:
  this.LoadBasket();

  eventBus.$on('basket-updated', (data) => {
      if(data){
         //on basket updated
          this.LoadBasket();
      }
    });
}

Remember that the Data is a 'reactive' property: if it change then also the presentation will be updated (if needed, tnx to the virtual dom used in VueJS): there is no need to call a 'refresh UI' method.

By the way, if you need only to add the just created item to the Items list you need only to push it into the array:

this.Items.push(newItem);

PS: I recommend you to take a look on Vuex ( https://vuex.vuejs.org/guide/state.html ) for the state management of your application: it's little bit more complex but permit a better design of your application.