How to re-render after a click Vue-CodePudding

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 != ''" >
    <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);
      },  
    },

CodePudding user response：

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)

CodePudding user response：

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>