我构建了一些功能，当我尝试将其导出到vue组件时，它停止工作。
我几乎可以肯定，当组件呈现模板时，ajax不可用，因为模块内的数组是空的。
在ajax加载之前，任何人都可以看到任何延迟渲染的方法吗？
也许我正在咆哮错误的树。数据在ajax .done（）回调中可用。
<template>
<div v-for="item in filteredItems" @mouseover="activate" @mouseout="deactivate" @click="openlink" class="item" :data-link="item.link">
<div class="vline"></div>
<div class="details">
<div class="top">
<div class="media">{{item.sectors}}</div>
<div class="title">{{item.title}}</div>
</div>
<div class="description">{{item.description}}</div>
</div>
<div class="img">
<div class="overlay"><a class="button" v-bind:href="'featured/'+item.link">View project <span class="plus"><span>[</span><span>+</span><span>]</span></span></a></div>
<div v-if="context == 'home'">
<img class="workimg" v-bind:src="item.imagemobile">
</div>
<div v-else>
<img class="workimg" v-bind:src="item.imagemobile">
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['context'],
data() {
return {
work: [],
}
},
computed: {
filteredItems: function () {
if (this.context == 'home') {
return this.work.filter(function (works) { return works});
}
else {
return this.work.filter(function (works) { return works});
}
},
},
mounted() {
self= this;
$.ajax({
method: "GET",
url: "/work.json",
})
.done(function(data){
self.work = data;
console.log(self.work);
// work has data!
})
.fail(function(xhr, status, error) {
console.log(error)
});
}
}
</script>
编辑：
一定是在ajax函数中使用this / self，因为箭头语法使它工作，这很奇怪，因为这看起来是正确的。
$.ajax({
method: 'GET',
url: '/work.json'
})
.done(data => {
this.work = data;
})
.fail((xhr, status, error) => {
})
答案 0 :(得分：3)
在请求完成之前隐藏呈现的经典方法是向isLoading添加data属性。请注意，我正在使用arrow function，因此我可以访问正确的上下文。
<template>
<div>
<p v-if="failed">Request failed</p>
<p v-else-if="isLoading">Loading...</p>
<div v-else>
<!-- your content here -->
</div>
</div>
</template>
<script>
export default {
data () {
return {
isLoading: false,
failed: false,
work: []
}
},
mounted () {
this.isLoading = true
$.ajax({
method: 'GET',
url: '/work.json'
})
.done(data => {
this.isLoading = false
this.work = data
})
.fail((xhr, status, error) => {
this.loading = false
this.failed = true
})
}
}
</script>
但是，有几个问题：