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)は機能しません。

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

あなたが唯一の変数またはプロパティではなく、this.photo(item) = photoAdded.nameようなメソッドの戻り値に割り当てることができます：あなたが方法ではなく、計算されたプロパティであることをphotoのためのもののように見えます。あなたのデータモデルは、おそらく簡単にすることができ

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> 

（あなたはそれを特定の方法を行うための正当な理由があるかもしれないので、私は、あなたが提供したコードに基づいて推測することができます。）