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

Question

我的组件 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 的计算机上更新照片。

能不能做到？

Answer 1

计算属性被定义为 无参数 函数，但您可以将它们作为属性访问。它们不是方法，所以 this.photo(item) 不会起作用。看起来你的意思是 photo 是一种方法，而不是计算属性:

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

您只能分配给变量或属性，而不能分配给 this.photo(item) = photoAdded.name.

等方法的 return 值

尝试这样做：

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 组件中的方法计算的？

How can I update computed from method in vue component?

vue.js

vuejs2

vue-component

vuex