javascript - 如何在 Vue 中只执行一次方法？

Question

我正在创建一个显示产品的 Web 应用程序(所有产品信息都来自数据库)，每个产品都有一个 More Details >> 按钮，单击它会打开一个包含该特定产品信息的模式窗口. js 文件包含被多次调用的 allRecords() 函数，使检查中的网络选项卡变得疯狂。我希望它只被调用一次。我看过这个:How to trigger a vue method only once, not every time我不确定如何将其应用到我的代码中。

下面是我的代码:

PHP 文件

<div id="myapp">
  {{ allRecords() }}
  <div class="content">
    <div class="nested" v-for="product in products">
      ...
    </div>
    <b-modal id="productModal" v-if="chosenProduct" hide-footer="true" ok-title="Buy Now" size="lg" :title="chosenProduct.Name">
      <div class = "inner-container">
        ...
      </div>
    </b-modal>
  </div>
</div>

JS 文件

var app = new Vue({
  'el': '#myapp',
  data: {
    products: "",
    chosenProduct: null
  },
  methods: {
    allRecords: function(){ \\ This function here is being called multiple times
      axios.get('ajaxfile.php')
        .then(function (response) {
          app.products = response.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    chooseProduct: function (product) {
      app.chosenProduct = product
    }
  }
})

Answer 1

根据我上面的评论:您可以在组件的已安装 Hook 中执行 ajax 请求。您的回调已经设置了 products 属性。然后就不需要从模板中调用 {{allRecords()}}，您只需在 v-for 循环中使用 products 即可。

这是该方法的演示。为了演示(和娱乐)目的，我将您的 php 替换为 icanhazdadjoke API。

var app = new Vue({
  'el': '#myapp',
  data: {
    products: "loading dad joke...",
    chosenProduct: null
  },
  methods: {
    chooseProduct: function(product) {
      app.chosenProduct = product;
    }
  },
  created: function() {
    axios.get('https://icanhazdadjoke.com/search?term=dogs', {
      headers: {
        Accept: 'application/json'
      }
    })
    .then(function(response) {
      app.products = response.results;
    })
    .catch(function(error) {
      console.log(error);
    });
  }
})

<script src="https://unpkg.com/axios@0.2.1/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="myapp">
  <p v-for="product in products">
    {{product.joke}}
  </p>
</div>