How to re-render after a click Vue

Question

I have a table component that is rendered when a node on my diagram is selected. In my template for the component that is rendering the table I have this:

<div v-if="this.nodeName != ''" class="flex">
    <table-details :title="tableName" :cardListData="valuesCardData"/>
  </div>

the problem is once the name is clicked the nodeName is no longer an empty string so it wont render again with the new data. Here is how I am getting the name + the API call to back end.

 data() {
      return {
          nodeName: '',
          tableName: null,
   }
}
    getNodeClicked() {
        window.addEventListener('sankey_node_clicked', (e) => { (this.nodeName = e.detail.name) })
      },
      async getTableData() {
        const nodeData = this.dateRange
        ? await get('nodeData', {
            dateStart: this.dateRange[0],
            dateEnd: this.dateRange[1],
            nodeName: this.nodeName
        }) : await get('nodeData', {
            nodeName: this.nodeName
          });
          console.log(nodeData)
        this.valuesCardData.push(nodeData);
      },  
    },

Answer 1

You can play with the :key attribute on your component to force the re-rendering.

There's a whole article written by Michael Thiessen about re-rendering:

https://michaelnthiessen.com/force-re-render/

The only thing you have to do is to put the key on your table-details (key should (or need to?) be put on components, not native HTML elements), and decide what you want to use as a key (could be an id, or your node name, or a simple number you increment when you press a button)

Answer 2

Your code should work perfectly, It's all about how nodeName value is getting update.

Here is the working demo, Please have a look. It will help you in finding the root cause.

 Vue.component('child', { props: ['childmsg'], template: '<div>{{ childmsg }}</div>' }); var app = new Vue({ el: '#app', data: { nodeName: 'alpha' }, mounted() { setTimeout(() => { this.nodeName = 'beta'; }, 5000); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-if="nodeName:= ''"> <child :childmsg="nodeName"> </child> </div> </div>