Vuejs computed properties that depend on other, asynchronous, computed properties

问题

In my Vuejs app I need to pass two computed properties to a component called avatar: an image surce and a string.

The problem is that not all items have a picture, and when they don't, vuejs throws an error because it cannot read property apples of undefined (because album_id is undefined).

The error is being thrown from that very long-winded src property in the avatar component, below:

<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>

I need to somehow treat the data that I receive from the api before I use it in the html template, but I am unsure as to how to proceed. Creating a separate pictures array within the get() function just seems wrong.

Using v-if and v-else to check if there is a src property to pass down also seems very clumsy.

Do I create another, separate, computed method that iterates through my list of items and gets the picture src if the item has one?

回答1:

I would suggest that you need to create getters for your apple sauce.. 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>

This allows you to create a graceful fallback with whatever arguments and implementation you choose.

来源：https://stackoverflow.com/questions/46743282/vuejs-computed-properties-that-depend-on-other-asynchronous-computed-propertie