monteecristoo’s blog

https://twitter.com/irakaarozo

VueJS 子コンポーネントに値をパスするときの謎の挙動

responseは[{prop1: {}, prop2: {}},

      {prop1: {}, prop2: {}}]  とする

messages ではこのresponse をすべて格納して modifiedMessages ではprop2を削除して格納したい。

 

@messages.vue 親コンポーネント

<app-messages v-for="message in messages"

  m=message

  key=message.id >

 

mounted() {
  axios.get('getMessages').then(response => {

    this.messages = response.data;

    const target = response.data;

    for(var i =0; i < target.length; i++) {

      delete target[i].prop2;

    }

    this.modifiedMessages = target;

})

 

@message.vue 子コンポーネント

{{ m.prop2 }} エラー

 

>>> this.messages, this.modifiedMessages ともにprop2が消滅している。

 

mounted() {
  axios.get('getMessages').then(response => {

    this.messages = response.data;

    return response.data;

}).then(response => {

  const target = response;

  for(var i =0; i < target.length; i++) {

    delete target[i].prop2;

  }

  this.modifiedMessages = target;

}); 

 

@message.vue 子コンポーネント

{{ m.prop2 }} OK

 

>>> this.messages, this.modifiedMessages ともにprop2が消滅している。

したがって vue debugger 上では m のprop2 は表示されていない。にもかかわらずちゃんとprop2 が子コンポーネントにパスされ、正常に{{ m.prop2 }} が動作している原因は不明。