web-dev-qa-db-ja.com

vueコンポーネントデータ関数での小道具へのアクセス

コンポーネントに小道具を渡します：

<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}}の期待値も確認できます）。したがって、データを渡すロジックは正しいです。

Data（）のmessageIdにアクセスする方法が間違っているようです。それでは、データの小道具messageIdにどのようにアクセスしますか？

vue.jsvue-loader
38
rahulserver

data()メソッドから、thisを使用してコンポーネントのプロパティを参照できます。

あなたの場合：

data: function() {
  var theData = {
    somevar: this.messageId,
    // other object attributes
  }

  return theData;
}
36
thanksd

データの割り当てに矢印機能を使用している場合、これは機能しないことに注意してください。

data: () => ({
  somevar: this.messageId // undefined
}),

thisはコンポーネントを指さないためです。代わりに、単純な関数を使用します。

data: function() {
  return { somevar: this.messageId }
},

または、Siva Tummaが提案したように、ES6オブジェクトメソッドの短縮形を使用します。

data() {
    return { somevar: this.messageId }
}
12
mufasa

小道具に等しいデータプロパティを割り当てるには、次のようにウォッチャーを使用できます。

<script>
   export default {
      props: ['messageId'],
      data: function(){
         var theData={
            somevar: "",
            // other object attributes
         }
      },
      watch: {
        messageId: function(newVal) { 
           this.somevar = newVal
        }
      }
   }
5
Saurabh