関数内のデータプロパティへのアクセスに問題があります。何かが足りないので、何がわからない。
これは私のクラスです
export default {
name: "Contact",
components: {
FooterComponent: FooterComponent,
NavigationComponent: NavigationComponent
},
data() {
return {
locale: Cookie.get('locale'),
nameAndLastName: '',
email: '',
subject: '',
message: '',
showPopUp: false
}
},
methods: {
sendEmail(e) {
e.preventDefault();
this.$validator.validateAll();
if (!this.$validator.errors.any()) {
let params = new URLSearchParams();
params.append('nameAndLastName', this.nameAndLastName);
params.append('email', this.email);
params.append('subject', this.subject);
params.append('message', this.message);
axios.post(this.$apiUrl + `rest/api/public/Contact/contact`, params, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(function (response) {
if (response.statusText === 'OK') {
console.log(this.showPopUp);
this.showPopUp = true;
}
})
.catch(function (error) {
console.log(error);
// This throws error TypeError: Cannot read property 'showPopUp' of undefined
});
}
}
},
mounted: function () {
console.log('test');
console.log(this.showPopUp);
},
}
問題は、メッセージを送信するとき、応答は問題なく、電子メールは送信されるが、エラー
TypeError: Cannot read property 'showPopUp' of undefined
が表示され続けることです
...マウントされたフックでconsole.log(this.showPopUp)を印刷しようとすると、変数は表示OKなので、メソッドからアクセスできないのはなぜですか? VueJs 2を使用しています。
追加の情報が必要な場合は、お知らせください。ありがとうございました!
回答 1 件
関連記事
- Animejsのコールバック関数内のAngularコンポーネントのプロパティ/関数にアクセスします
- TypeScriptの関数の戻り値の型でパラメーターの値をプロパティ名として使用するにはどうすればよいですか?
- PHP関数でプロパティを使用する
- サブフォルダー内の他のPythonファイルのアクセス関数
- jQuery:replaceWith()関数を使用できません:未定義のプロパティ 'createDocumentFragment'を読み取れません
- Vuejs 3setup()でthis。$rootにアクセスします
- VueJS:テンプレートから直接外部JSファイルの関数を呼び出す
- エクスポート機能内の小道具にアクセスする
- thymleafを使用してオブジェクトのリストプロパティにアクセスする方法
- AWSサーバーレス関数:aws-sdkオブジェクトのメソッドにアクセスできません…「関数ではありません」
関連した質問
- Vuejsを使用したボタンクリックでデフォルトの防止オプションを使用できません
- 新しいキーがオブジェクトに追加されたときにv-forを再レンダリングする方法
- vueとmomentを使用してジャスミンのボタンメソッドに引数を渡すことができません
- vueでグローバルにvee-validateを設定するにはどうすればよいですか?
- Vue:アクションが実行されていないときにボタンを非表示にする
- Vue:ローカルストレージからユーザー情報にアクセスする方法
- Vue:コンポーネントにCSSファイルとJSファイルをロードするにはどうすればよいですか?
- VueおよびVuetifyの動的コンテンツ内でレンダリングされない画像ソース
- vuetifyでvuejsビルドサイズを減らす方法は?
- npmパッケージをnuxtjsに追加できません[vue-star-rating]
ザ・
this
あなたの.then()
の中 コールバックは、探しているプロキシされたデータではなく、コールバック自体を指します。動作させるには、正しい
this
を割り当てる必要があります 別の変数へのコンテキストを作成してから、この変数を使用します。それはそれがコードに見える方法です:
だからこそ、
ES6
矢印関数はとても便利です。ザ・this
そこには関数自体を参照していません。したがって、次のような矢印関数を使用することもできます。