[解決済み] Vue コンポーネントのデータ関数で props にアクセスする
2023-04-30 15:07:03
質問
コンポーネントにpropsを渡しています。
<template>
{{messageId}}
// other html code
</template>
<script>
export default {
props: ['messageId'],
data: function(){
var theData={
// below line gives ReferenceError messageId is not defined
somevar: messageId,
// other object attributes
}
}
}
</script>
上記のコードで、私はエラーが発生する行をコメントしました。その行を削除すると、通常通り動作し、テンプレートも正しく表示されます({{messageId}}の期待値も表示されます)。したがって、データを渡すためのロジックは正しいです。
にアクセスする方法は、どうやら
messageId
にアクセスする方法が間違っているようです。
では、どのようにすればプロップス
messageId
にアクセスするにはどうすればよいのでしょうか?
どのように解決するのですか?
からの
data()
メソッドから、コンポーネントのプロパティを参照するには
this
.
ということで、あなたの場合は
data: function() {
var theData = {
somevar: this.messageId,
// other object attributes
}
return theData;
}
関連
-
[解決済み] npm run dev」「npm run watch」はどのようなスクリプトですか?
-
TypeError: undefinedはオブジェクトではありません('i18n._t'を評価中)。
-
フロントエンドインタビューの質問まとめ
-
vue3 が axios エラーを導入する 未定義または null をオブジェクトに変換できない
-
プロジェクトノート ---- TypeErrorに遭遇しました。"_vm.xxxxxx は関数ではありません"
-
[解決済み】Vue 2 - プロップの変異 vue-warn
-
[解決済み】@clickとv-on:clickの違い Vuejs
-
[解決済み] Vue CLI CSSプリプロセッサーオプション:dart-sass VS node-sass?
-
[解決済み] Vue.js:各コンポーネントインスタンスにユニークなIDを設定するには?
-
[解決済み] 属性内の補間が削除されました。v-bindかコロンの省略記法を使用してください "を解決するには?Vue.js 2
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] プロジェクトのvue.jsのバージョンを確認する方法は?
-
[解決済み] Vuex - 計算されたプロパティ "name "が割り当てられたが、セッターを持たない
-
[解決済み] Vuetify グリッドレイアウト v-layout v-flex
-
[解決済み】Vue.js - urlからハッシュバン#!を削除するには?
-
[解決済み】Vuex - ミューテーションに複数のパラメータを渡す
-
[解決済み] Vue.js:各コンポーネントインスタンスにユニークなIDを設定するには?
-
[解決済み] Jest + Vuejsでwindow.location.hrefをモックするには?
-
[解決済み] 計算されたプロパティで $refs を使用する
-
[解決済み] 'v-slot' ディレクティブはどんな修飾子もサポートしません。
-
[解決済み] コンポーネントを正しく登録しましたか?再帰的なコンポーネントの場合は、必ず "name "オプションを指定してください。