Vue 向@click 事件添加条件

Question

我有一个引导程序折叠，我想在打开折叠时而不是在关闭它时执行数据提取。 所以我需要对aria-expanded属性进行检查。

我不确定这是否是一个好方法，因为这将始终在关闭和打开时执行提取。

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

Answer 1

您可以在 fetch 方法中使用逻辑来检查数据是否已加载。 将新字典添加到 data() 并将详细信息添加到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;
       }
   }
}