v-for propでデータが渡ってくるたびに呼べるメソッド

Question

//parent.vue

<template>
  <div class="parent">
    <Child v-for="value in getList" v-bind:value="value"/>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

//コンポーネント
import Child from './components/child.vue';

@Component({
  components: {
    Child,
  },
})
export default class Parent extends Vue {

  get getList(){
    return this.$store.getters["parentModule/GET_LIST"]
  } 
}

</script>

//child.vue

<template>

    <div class="child">

        <div class="name">{{ getValueName }}</div> 
        <img :src="getValueImage" class="image"/>

    </div>

</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({
  props: {
  }
})

export default class Child extends Vue {

    @Prop() private value!: any;

    get getValueName(){
        this.$store.dispatch("parentModule/childModule/SET_VALUE", this.value.id)
        return this.$store.getters["parentModule/childModule/GET_NAME"]
    }

     get getValueImage(){
        this.$store.dispatch("parentModule/childModule/SET_VALUE", this.value.id)
        return this.$store.getters["parentModule/childModule/GET_IMAGE"]
    }

}

</script>

<style lang="scss">

</style>

//childModule for vuex

import Value from "value"

import List from "list"
var list = new List()

export const childModule = {
    namespaced: true,
    state: {
        value : Value
    },
    mutations: {
        "SET_VALUE"(state : any, valueId : number){
            state.value = list.getValue(valueId) //ここで指定されたvalue(nameとimageを持ってる)が得られる
        }  
    },
    actions: {
        "SET_VALUE"({ commit } , valueId : number){
            commit("SET_VALUE", valueId)
        }
    },
    getters:{
        "GET_VALUE_NAME" : state => { return state.value.name },
        "GET_VALUE_IMAGE" : state => { return state.value.image },
        "GET_VALUE" : state => { return state.value }
    }  
}

リストを表示しています
リストを検索した時、

this.$store.getters["parentModule/GET_LIST"]

の内容が検索され絞られたリストに変わります
getListはcomputedになっており、検索結果を子コンポーネントに渡します

子コンポーネントは変化したidを元に

get getValueName(){
this.$store.dispatch("parentModule/childModule/SET_VALUE", this.value.id)
return this.$store.getters["parentModule/childModule/GET_VALUE_NAME"]
}

get getValueImage(){
this.$store.dispatch("parentModule/childModule/SET_VALUE", this.value.id)
return this.$store.getters["parentModule/childModule/GET_VALUE_IMAGE"]
}

値を出力しています

ここで、上記２つのメソッドでそれぞれ

this.$store.dispatch("parentModule/childModule/SET_VALUE", this.value.id)

としているところを１つにしたいです
つまり、propされた時？に

this.$store.dispatch("parentModule/childModule/SET_VALUE", this.value.id)

この処理をしたいです...

どのように書けばよろしいでしょうか

普通に片方に書くだけで解決するのですが、なんだか気持ち悪いです

そしてchild.vueで

<template>

    <div class="child">

        <div class="name">{{ getValue.name }}</div> 
        <img :src="getValue.image" class="image"/>

    </div>

</template>

get getValue(){
     this.$store.dispatch("parentModule/childModule/SET_VALUE", this.value.id)
     return this.$store.getters["parentModule/childModule/GET_VALUE"]
}

このようにすると、valueが全て最後のvalueに上書きされて、最後のvalueのリストだけになってしまいます

Answer 1

上のようなことをする必要は全くなかったです。

まずchildのコンポーネントにcomputedのgetのメソッドを書いて、しかもその中に
dispatchを書くなんてすごい変なことをしてました。
変化した配列の結果を取得するためにやっていたことですが、propのたびに呼ばれるメソッドとかそのようなことを考える必要は一切なく、

get getList(){
return this.$store.getters["parentModule/GET_LIST"]
}

ここの値が変われば自動的に子コンポーネントへ渡される値も変わります。

//child.vue

<template>

    <div class="child">

        <div class="name">{{ value.name }}</div> 
        <img :src="value.image" class="image"/>

    </div>

</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({
  props: {
  }
})

export default class Child extends Vue {

    @Prop() private value!: any;

}

</script>

<style lang="scss">

</style>

本来これだけで良かったです。
しかし、当時は、元の配列が変わると、observerがオブジェクトから消えてしまい、自動的にchild.vue達に反映させるということができてませんでした。
その理由はvuexのstateとしていたモデルに初期値を入れてなかったからです。

例えば、

class Model{
    member : Person[]
    
    constructor(responseStart){

        //↓仮にこのような値が来たとする
        responseStart = [
            { id: 1 , name : "山田" },
            { id: 2 , name : "田中" }
        ]
        this.member = responseStart
    }

}

class Person{
    id : number
    name : string
}

このような書き方だとうまくいきません

class Model{
    member : Person[] = []
    
    constructor(responseStart){

        //↓仮にこのような値が来たとする
        responseStart = [
            { id: 1 , name : "山田" },
            { id: 2 , name : "田中" }
        ]
        this.member = responseStart
    }

}

class Person{
    id : number
    name : string
}

みたいにするか

class Model{
    member : Person[]
    
    constructor(responseStart){

        this.member = []

        //↓仮にこのような値が来たとする
        responseStart = [
            { id: 1 , name : "山田" },
            { id: 2 , name : "田中" }
        ]
        this.member = responseStart
    }

}

class Person{
    id : number
    name : string
}

このようにコンストラクターの最初にやるのでも大丈夫です。
昔のことだったので少しあやふやですが、確かこのような問題だった気がします。
回答遅れました。

Answer 2

TypeScript 不明なため適切な答えになっているかわかりませんが、子のコンポーネントで props が渡されたとき、propsの値の変化は watchを使って監視することができます。

Comments

[退会済みユーザー]

回答ありがとうございます！
なるほどです、たしかにその手がありましたね
月曜日会社で試してみます

[退会済みユーザー]

毎回child.vueコンポーネントは初期化されるので、watchでは違いを察知してくれないみたいです...
前の状態と今の状態から違いを得ようとしてもそもそも前の状態がない、みたいな現象になっちゃってます
ちょっと考え直してみます、回答どうもありがとうございました