Vue 向@click 事件添加条件

Question

I have a bootstrap collapse and I want to perform a fetch of data when you open the collapse but not when you close it. So I need to perform a check on the aria-expanded attribute.

I am not sure if this is a good approach, because this will always perform the fetch, on close and on open.

<span
    data-toggle="collapse"
    data-target="#collapseExample"
    aria-expanded="false"
    aria-controls="collapseExample"
>
    <small @click="fetch(id)">Open/Close</small>
</span>

Answer 1

You can have your logic in the fetch method to check if the data is already loaded. Add a new dictionary to the data() and add the details to the fetchedData .

data() {
  return {
    fetchedData: {}
  }
},
methods: {
   fetch: function(id) {
       if(this.fetchedData[id]) {
          return this.fetchedData[id];
       } else {
          // call to fetch the data and add those details to the dictionary fetchedData
          this.fetchedData[id] = response.data;
       }
   }
}