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

我的组件VUE这样的：如何从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>

如果执行创建图像的方法，我要更新带有photoAdded.name值计算的照片。

是否可以做到？

来源

2017-07-15 Success Man

计算属性只是默认的getter，你不能像这样传递参数给他们，而是你可以采用另一种方法，例如。使用方法，或为该计算属性定义setter。阅读[本文档页面]（https://vuejs.org/v2/guide/computed.html#Computed-Setter）了解更多信息。 – ironcladgeek

计算属性被定义为无参数函数，但您可以将它们作为属性进行访问。他们不是方法，所以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>

（我只能根据您所提供的，所以你可能有这样做它以某种方式的正当理由代码推测）

来源

2017-07-15 08:24:22

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

回答

相关问题