Question

我的组件如下：

<template>
    <div>
        <ul class="list-inline list-photo">
            <li v-for="item in items">
                <template v-if="photoList[item]">
                    ...
                        <img :src="baseUrl+'/img/products/thumbs/'+photo(item)">
                    ...
                </template>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        props: ['product'],
        data() {
                return {
                    items: [1,2,3,4,5],
                    baseUrl: window.Laravel.baseUrl,
                    photoList: this.product.photo_list.reduce(function(acc, p) { acc[Number(p.id)] = p; return acc;}, {}),
                }
        },
        computed: {
            photo(item) {
                return (this.photoList) ? photoList[item].name : ''
            }
        },
        methods: {
            createImage(item, response) {
                ...
                this.photo(item) = photoAdded.name
            },
        }
    }
</script>

如果执行了createImage方法，我想更新一个带有photoAdded.name值的计算机上的照片。

是否可以做到？

Answer 1

计算属性定义为无参数函数，但您可以将它们作为属性进行访问。它们不是方法，因此this.photo(item)不起作用。看起来你的意思是photo是一个方法，而不是计算属性：

methods: {
    photo(item) {
        return (this.photoList) ? this.photoList[item].name : ''
    }
}

您只能分配给变量或属性，而不能分配this.photo(item) = photoAdded.name等方法的返回值。

尝试这样做：

createImage(item, response) {
    ...

    this.photoList[item].name = photoAdded.name
    // OR
    this.photoList[item] = photoAdded
}

您的数据模型可能会简化。为什么items是一个整数数组？你甚至需要items吗？为什么不像这样循环遍历每张照片：

<li v-for="photo in photoList">
    ...
    <img :src="baseUrl + '/img/products/thumbs/' + photo.name">
    ...
</li>

（我只能根据您提供的代码进行推测，因此您可能有正当理由以某种方式执行此操作。）

如何在vue组件中更新计算方法？

1 个答案: