在我的 Vuejs 应用程序中,我需要将两个计算属性传递给名为 avatar
的组件:图像表面和字符串。
问题在于,并非所有项目都有图片,当没有图片时,vuejs 会抛出错误,因为它无法读取 undefined
的属性 apples
(因为album_id
未定义)。
该错误是从 avatar
组件中冗长的 src
属性引发的,如下所示:
<template>
<div class="apples">
<div id="mast" class="f3 b bb b--black-10">
<h2 class="ttc">Apple's List</h2>
</div>
<div id="content">
<li v-for="apple in apples" class="list-item">
<avatar :src="apple[ 'album_id '][ 'apples' ][ '256' ]" :size="50" :appletype="apple.type"></avatar>
</li>
</div>
</div>
</template>
<script>
import Avatar from './Avatar.vue';
import Apples from '@/api/apples';
export default {
name: 'apples',
asyncComputed: {
apples: {
async get() {
const apples = await Apples.getAll();
return apples.data;
},
default: []
}
},
components: {
Avatar
}
};
</script>
在 html 模板中使用从 api 接收的数据之前,我需要以某种方式处理它,但我不确定如何继续。在 get()
函数中创建单独的图片数组似乎是错误的。
使用v-if
和v-else
来检查是否有src
属性要传递也显得很笨拙。
我是否创建另一个单独的计算方法来迭代我的项目列表并获取图片src
(如果项目有)?
最佳答案
我建议你需要为你的苹果酱创建 setter/getter .. er.. source.. er.. src :)
<template>
<div class="apples">
<div id="mast" class="f3 b bb b--black-10">
<h2 class="ttc">Apple's List</h2>
</div>
<div id="content">
<li v-for="apple in apples" class="list-item">
<avatar :src="getAvatar(apple, 256)" :size="50" :appletype="apple.type"></avatar>
</li>
</div>
</div>
</template>
<script>
import Avatar from './Avatar.vue';
import Apples from '@/api/apples';
export default {
name: 'apples',
methods: {
getAvatar: function(obj, id) {
return obj.album_id.apples[ id ] | ''
}
},
asyncComputed: {
apples: {
async get() {
const apples = await Apples.getAll();
return apples.data;
},
default: []
}
},
components: {
Avatar
}
};
</script>
这允许您使用您选择的任何参数和实现创建一个优雅的后备。
关于javascript - Vuejs 计算属性依赖于其他异步计算属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46743282/