VueCLI3を使っています。
親コンポーネントでのデータの変更が子コンポーネントの方で検知されるはずのところが、実際にはされておらず、その原因が分からなかったため質問させていただきます。
まず、親子コンポーネントが以下のような構成で作られています。
質問の趣旨のため、親コンポーネントはmethodsの部分のみ、子コンポーネントはpropsとcomputedの一部分のみの、出来るだけ今回の質問に関係ある部分のソースコードのみを載せます。
<親コンポーネント>
Vue
1methods: { 2 fuga() { 3 console.log("とりあえずemit成功したっぽいよ!!"); 4 if (this.lastEl1) { 5 this.lastEl = this.lastEl1; 6 console.log("lastEl1のfuga()発動したよ!!"); 7 } 8 if (this.lastEl2) { 9 this.lastEl = this.lastEl2; 10 console.log("lastEl2のfuga()発動したよ!!"); 11 } 12 if (this.lastEl3) { 13 this.lastEl = this.lastEl3; 14 console.log("lastEl3のfuga()発動したよ!!"); 15 } 16 } 17 }
<子コンポーネント>
Vue
1 2 props: { 3 lastEl: String, 4 }, 5 computed: { 6 processText() { 7 console.log("関数processTextが実行されたよ!!"); 8 if (this.lastEl === "1") { 9 処理1 10 } else if (this.lastEl === "2") { 11 処理2 12 } else if (this.lastEl === "3") { 13 処理3 14 15 <以下さらに処理が続いていく...>
このソースがどのような動きをするか簡単に説明すると、まず親コンポーネントにて定義したlastElという、"1"~"16"までの値を持つString型のデータがあるイベントによって決まります。
そうすると、子コンポーネントではlastElをpropsに登録しているため、親コンポーネントでlastElの値が変わるとともに、computedに登録した関数processTextが実行されます。(この関数では、lastElの"1"~"16"の値によってそれぞれある処理がなされます)
ここで、親コンポーネントのソースコードではlastElの値を変更するif文が3つあります。それぞれのif文に出てくるlastEl1, lastEl2, lastEl3という値は、lastElの値とは関係なくそれぞれに"1"~"16"の値のいずれかを持っており、それがlastElに代入されることになります。
そして、ここが問題なのですが、if文が3つありlastEl1〜lastEl3の値がそれぞれ異なるならば、計3回lastElの値が変更されたことになり、当然lastElの値の変更を検知した3回分、子コンポーネントの関数processTextが行われるはずです。
しかし、実際に関数processTextが実行されて処理が行われたのは一回だけでした。
これを、lastElの値が変更された回数だけ、適切に子コンポーネントの関数が実行されるようにするにはどうしたらよいでしょうか?
私が試してみた策としては、
以下のように子コンポーネントにthis.$nextTickを使ってみたりしました。
しかし、解決には至りませんでした。
Vue
1methods: { 2 fuga() { 3 console.log("とりあえずemit成功したっぽいよ!!"); 4 this.$nextTick(() => { 5 if (this.lastEl1) { 6 this.lastEl = this.lastEl1; 7 console.log("lastEl1のfuga()発動したよ!!"); 8 } 9 }); 10 this.$nextTick(() => { 11 if (this.lastEl2) { 12 this.lastEl = this.lastEl2; 13 console.log("lastEl2のfuga()発動したよ!!"); 14 } 15 }); 16 this.$nextTick(() => { 17 if (this.lastEl3) { 18 this.lastEl = this.lastEl3; 19 console.log("lastEl3のfuga()発動したよ!!"); 20 } 21 }); 22 }, 23}
Vue.jsは非同期処理をしているために同じ値(今回の場合はlastEl)を一度に複数回変更してもそれが検知されないのでしょうか?
Vue.jsのライフサイクルなども関係するのかもしれませんが、そこらへんについての知識がなく質問をしました。よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。