More than 5 years have passed since last update.

thisでインスタンス内のデータにアクセス！ ❏Vue.js❏

Posted at 2019-12-14

メソッドを作る際に、インスタンス内のデータを利用したい時があります。
そこで使うのがthisです。

開発環境はJSFiddleです。 https://qiita.com/ITmanbow/items/9ae48d37aa5b847f1b3b

使い方

this.インスタンス内のプロパティ

sayHiメソッドでインスタンス内のmessageを返します。

html

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <p>{{ sayHi() }}</p>
</div>

javascript

new Vue({
  el: "#app",
  data: {
    message: "hello world!"
  },
  methods: {
    sayHi: function() {
      return this.message;
    }
  }
})

【出力結果】
hello world!

`this`はこれからたくさん使いそうだ。。。
ではまた！