我正在创建一个显示产品的 Web 应用程序(所有产品信息均来自数据库),每个产品都有一个 更多详细信息 >>
按钮,单击时会打开一个模式窗口,其中包含特定产品的信息。 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
}
}
})
最佳答案
根据我上面的评论:
您可以在组件的 Mounted 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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81e0f9e8eef2c1b1afb3afb0" rel="noreferrer noopener nofollow">[email protected]</a>/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>
关于javascript - 如何在 Vue 中只执行一次方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58270819/