typescript
1//parent.vue 2 3<template> 4 <div class="parent"> 5 <Child v-for="value in getList" v-bind:value="value"/> 6 </div> 7</template> 8 9<script lang="ts"> 10import { Component, Prop, Vue } from 'vue-property-decorator'; 11 12//コンポーネント 13import Child from './components/child.vue'; 14 15@Component({ 16 components: { 17 Child, 18 }, 19}) 20export default class Parent extends Vue { 21 22 get getList(){ 23 return this.$store.getters["parentModule/GET_LIST"] 24 } 25} 26 27</script> 28 29
typescript
1//child.vue 2 3<template> 4 5 <div class="child"> 6 7 <div class="name">{{ getValueName }}</div> 8 <img :src="getValueImage" class="image"/> 9 10 </div> 11 12</template> 13 14<script lang="ts"> 15import { Component, Prop, Vue } from 'vue-property-decorator'; 16 17@Component({ 18 props: { 19 } 20}) 21 22export default class Child extends Vue { 23 24 @Prop() private value!: any; 25 26 get getValueName(){ 27 this.$store.dispatch("parentModule/childModule/SET_VALUE", this.value.id) 28 return this.$store.getters["parentModule/childModule/GET_NAME"] 29 } 30 31 get getValueImage(){ 32 this.$store.dispatch("parentModule/childModule/SET_VALUE", this.value.id) 33 return this.$store.getters["parentModule/childModule/GET_IMAGE"] 34 } 35 36} 37 38</script> 39 40<style lang="scss"> 41 42</style>
typescript
1 2//childModule for vuex 3 4import Value from "value" 5 6import List from "list" 7var list = new List() 8 9export const childModule = { 10 namespaced: true, 11 state: { 12 value : Value 13 }, 14 mutations: { 15 "SET_VALUE"(state : any, valueId : number){ 16 state.value = list.getValue(valueId) //ここで指定されたvalue(nameとimageを持ってる)が得られる 17 } 18 }, 19 actions: { 20 "SET_VALUE"({ commit } , valueId : number){ 21 commit("SET_VALUE", valueId) 22 } 23 }, 24 getters:{ 25 "GET_VALUE_NAME" : state => { return state.value.name }, 26 "GET_VALUE_IMAGE" : state => { return state.value.image }, 27 "GET_VALUE" : state => { return state.value } 28 } 29}
リストを表示しています
リストを検索した時、
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で
typescript
1 2<template> 3 4 <div class="child"> 5 6 <div class="name">{{ getValue.name }}</div> 7 <img :src="getValue.image" class="image"/> 8 9 </div> 10 11</template> 12 13get getValue(){ 14 this.$store.dispatch("parentModule/childModule/SET_VALUE", this.value.id) 15 return this.$store.getters["parentModule/childModule/GET_VALUE"] 16}
このようにすると、valueが全て最後のvalueに上書きされて、最後のvalueのリストだけになってしまいます
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。