我试图建立一个Vue的模块上我的网站shopify,所以我创建了一个集合JSON端点:shopify AJAX产品在收集
{% layout none %}
{% paginate collection.products by settings.pagination_limit %}
{
"results": {{ collection.products | json }}
}
{% endpaginate %}
当我访问该端点在/收集/集料穴?view = json我得到了所有产品的完整转储,但是当我得到的ajax是没有嵌套产品的集合对象时。
我的ajax:
$.getJSON('/collections/mens-slip-on?view=json', function(response) {
console.log(response);
that.products = response;
});
我的结果:
Object {collection: Object}
collection:Object
description:(...)
handle:(...)
id:(...)
image:(...)
products_count:(...)
published_at:(...)
title:(...)
updated_at:(...)
我Vue的成分在全:
new Vue({
el: '#filterable',
data: {
collection: null,
products: null
},
mounted() {
this.initCollection();
this.fetchProducts();
},
methods: {
initCollection: function() {
var currPath = window.location.pathname;
this.collection = currPath.substring(currPath.lastIndexOf('/') + 1);
},
fetchProducts: function() {
var that = this;
$.getJSON('/collections/mens-slip-on?view=json', function(response) {
console.log(response);
that.products = response;
});
}
}
});
Vue.config.devtools = true;
看来,不管我把我的collection.json .liquid模板它总是返回集合对象。
更新:我能够通过使用XHR而不是jQuery来解决这个问题来完成ajax调用。看起来这个问题与jQuery getJSON有某种关系,但我不清楚其中的原因。
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = alertContents;
httpRequest.open('GET', '/collections/' + this.collection + '?view=json', true);
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.send();
function alertContents() {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
var response = JSON.parse(httpRequest.responseText);
parent.products = response.results;
}
}
}
请问您可以添加更多vuejs相关代码吗? –
Vue js代码无关紧要,我只是调用一个运行ajax调用的方法。 –
那有什么相关的? :)当你向Postman中的那个api端点发出GET请求时(希望你使用它),你得到了什么? –