如何更新从 vue 组件中的方法计算得出的？答案

【问题标题】：How can I update computed from method in vue component?如何更新从 vue 组件中的方法计算得出的？
【发布时间】：2017-07-15 06:35:10
【问题描述】：

我的组件 vue 是这样的：

<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 的值更新计算上的照片。

能不能做到？

【问题讨论】：

默认情况下，计算属性是 getter-only，您不能像这样向它们传递参数，相反，您可以采用另一种方法，例如。使用方法，或为该计算属性定义 setter。阅读this documentation page 了解更多信息。

标签： vue.js vuejs2 vue-component vuex

【解决方案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>

（我只能根据您提供的代码进行推测，因此您可能有正当理由这样做。）

【讨论】：