如何從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組件中的方法更新計算？

回答

相關問題