[vue.js] propsの値を取得できない

Question

#やりたいこと
propsの値をdataに渡したいのですが、うまくいきません。

data（）{ returun{ uploaded_image: this.prop_uploaded_image } }
上記で取得できると思うのですが、uploade_imageに入らないのが現状です。

#ソース

//親コンポーネント
<template>
  <div>
    <router-view
      :su_company.sync="su_company"
      :capital_units.sync="capital_units"
      :investment_rounds.sync="investment_rounds"
      :stages.sync="stages"
      :prefectures.sync="prefectures"
      :industries.sync="industries"
      :prop_uploaded_image.sync="prop_uploaded_image"　<- これを渡す
      :prop_img_name.sync="prop_img_name"
      :password.sync="password"
      :password_confirm.sync="password_confirm"
      >
    </router-view>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        su_company: {},
        capital_units: {},
        investment_rounds:{},
        stages:{},
        prefectures: {},
        industries: {},
        prop_uploaded_image: '',
        prop_img_name: '',
        password: '',
        password_confirm: '',
      }
    },
    beforeMount() {
      if(this.$route.name !== "SuSuEditConfirm"){
        this.fetchSuCompany();
        this.$store.commit('su_company/initPassword');
      }else{
        this.getPassword;
        this.getPasswordConfirm;
      }
      this.fetchRelatedParts();
    },
    methods: {
      fetchSuCompany: function() {
        this.$auth.api.get(`/su/su_companies/edit`)
        .then(response => {
          this.su_company = response.data.su_company
          this.prop_upload_image = this.su_company.image_url　<- ここでつめてる
        });
      },
      fetchRelatedParts: function() {
        this.$auth.api.get(`/su/su_companies/related_parts`)
        .then(response => {
          this.capital_units = response.data.capital_units
          this.investment_rounds = response.data.investment_rounds
          this.stages = response.data.stages
          this.prefectures = response.data.prefectures
          this.industries = response.data.industries
        });
      },
    },
    computed: {
      getSuCompany () {
        this.su_company = this.$store.getters['su_company/suCompany']
      },
      getPassword () {
        this.password = this.$store.getters['su_company/password']
      },
      getPasswordConfirm () {
        this.password_confirm = this.$store.getters['su_company/passwordConfirm']
      },
      getUploadedImage () {
        this.prop_uploaded_image = this.$store.getters['su_company/uploadedImage']
      },
      getImgName () {
        this.prop_img_name = this.$store.getters['su_company/imgName']
      }
    },
    created: function(){
      this.getSuCompany;
      this.getImgName;
      this.getUploadedImage;
    }
  }
</script>

//子コンポーネント
  export default {
    props: {
      su_company: Object,
      capital_units: Object,
      investment_rounds: Object,
      stages: Object,
      prefectures: Object,
      industries: Object,
      prop_uploaded_image: String, <- ここで受け取る
      prop_img_name: String,
      password: String,
      password_confirm: String,
    },
    data() {
      return {
        uploaded_image: this.prop_uploaded_image,　<- ここで詰める
        img_name: this.prop_img_name,
        days_max: '',
        errors: '',
        reserve_password: this.password,
        reserve_password_confirm: this.password_confirm,
        // img_src: require(this.su_company.image_url),
        toggle_password: 'password',
        toggle_password_confirm: 'password',
      }
    },

#上記ソースの結果

propsにはちゃんといるが、data側には値がはいっていません。。
原因がわからず困っています。
ご回答お待ちしております。

Answer 1

子コンポーネントを生成する最初のタイミングでは、prop_uploaded_image が空になっているからだと思います。
親コンポーネントから渡される props が変化した時に、子コンポーネントの state を更新したいのであれば、watch を使うという手もあります。

// 子コンポーネント
<script>
export default {
  name: "ChildComponent",
  props: {
    prop_value: String
  },
  data() {
    return {
      state_value: this.prop_value
    };
  },
  watch: {
    prop_value(newValue) {
      this.state_value = newValue;
    }
  }
};
</script>

(ただ、親子コンポーネント間で state の同期を取りたいのであれば、子コンポーネントでは state を使わず、props を参照するだけで良いかもしれません)

Comments

[tenten11055]

ご回答ありがとうございました！
今回は使わない方向だったのですが、いつか使ってみたいです。
まだ使ったことがないので。。

Answer 2

子コンポーネントにprop_uploaded_imageを注入した時点で空のデータを送っているからではないですか？

空の値のprop_uploaded_imageがpropで子コンポーネントに引き渡される
↓
子コンポーネントでprop_uploaded_imageの値をdataのuploaded_imageへ代入
↓
getUploadedImageでprop_uploaded_imageにストアの値を代入

となっているのでuploaded_imageが空になっているように見えます。

ストアの値を初期代入したいのであればそのまま設定されてはどうでしょうか？
また、createdでcomputedの関数を動かしてdataへ代入処理を行っていますが誤った使い方なのでmethodを使うようにしましょう。

<script>
export default {
  data() {
    return {
      prop_uploaded_image: this.$store.getters['su_company/uploadedImage']
    }
  }
}
</script>

Comments

[tenten11055]

ご回答ありがとうございました！
storeまわりを見直し、無事に解決いたしました！