質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.83%

  • JavaScript

    14845questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Vue.js

    524questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • TypeScript

    285questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 336

nihcika

score 11

//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"]
}

値を出力しています

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

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

としているところを1つにしたいです
つまり、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のリストだけになってしまいます

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/23 15:43 編集

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

    キャンセル

  • 2018/06/26 16:30

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.83%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    14845questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Vue.js

    524questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • TypeScript

    285questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。