に小道具に基づいて更新されない:子私は私の親スコープにこのようなものを持っているVue.js
<form-error :errors="errors"></form-error>
<textarea class="form-control" name="post" cols="30" rows="8" @keydown="errors.clear('post')" v-model="post"></textarea>
注私はクラスに メソッドを呼び出すことによって、エラーをクリアしています@keydown
イベント、 。
class Errors {
constructor() {
this.errors = {};
}
get(field) {
if (this.errors[field]) {
return this.errors[field][0];
}
}
clear(field) {
delete this.errors[field];
}
has(field) {
return this.errors.hasOwnProperty(field);
}
}
そして、私はこの持ち<form-error>
子コンポーネントで:v-text="errors.get('post')"
が正常に動作している間、今
<template>
<div v-if="errors.has('post')" class="alert alert-danger" v-text="errors.get('post')"></div>
</template>
<script>
export default {
props: ['errors']
};
</script>
を、と私は<form-error>
子コンポーネントにErrors
以下のクラス、 のインスタンスを渡しています:errors="errors"
で エラー が表示され、v-if="errors.has('post')"
の部分がまったく動作しません。
私はerrors
が小道具として正しい方法で渡されたと仮定しています。そうでなければ、 errors.get('post')
は動作しません。親がその@keydown
イベントをトリガし、私は エラーオブジェクトを参照して適切に(クローム用Vueのアドオン)を空にされている理由とき
質問は、v-if
一部は、このようにdiv要素を隠して、更新しませんか?
あなたが見ることができるように、<FormError>
子コンポーネントは、私が入力を開始するときerrors
の変化を反映するために更新されているが、それでもv-if
トリガされません。
編集
さらに混乱何、ドキュメントは言う: 小道具が配列またはオブジェクトであるかのように、JavaScriptでのオブジェクトと配列は、参照によって渡されることを
ノート(のように私の場合)、子オブジェクト 内のオブジェクトまたは配列自体を変更すると、親状態に影響します。
私の子供の中から対象を突然変異させているわけではありませんが、 重要な部分は、親の中の対象の変更が子供に反映されるべきです。
しかし、これは、マップされていません:あなたは、次の選択肢のいずれかを使用して試すことができます'hasOwnProperty'の周りのメソッドラッパー – branquito
@branquito' hasOwnProperty'も使うことができます。 – Saurabh
申し訳ありませんが、私たちはここで同じページにいるとは思いません。私はhasOwnPropertyを使用していますが、動作しません(ヒント:そのErrorクラスを見てください)。それとは別に、 '
branquito