1. ホーム
  2. vue.js

[解決済み] 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;
}