在我的Vuejs应用程序中,我需要将两个计算属性传递给一个名为avatar
的组件:一个图像和一个字符串。
问题是并非所有项目都有图片,如果没有,vuejs会抛出错误,因为它无法读取apples
的属性undefined
(因为album_id
未定义)。
错误来自src
组件中非常冗长的avatar
属性,如下所示:
<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
如果该项目有一个?
答案 0 :(得分:0)
我建议您需要为苹果酱创建吸气剂.. 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>
这使您可以根据自己选择的参数和实现创建优美的后备广告。