参考コード

template から JavaScript の変数を参照するにはどうしたらいいか

例えば以下のように、JavaScript で計算した結果を Vue template から参照しようとしても、参照できません。

App.vue
<template>
  <div id="app">{{ number }}</div>
</template>

<script>
const number = 2 * 10;
console.log(number);

export default {};
</script>

Reactive な data だけが Vue Template から参照できる

Vue template から参照できる値は、"Reactive な data" だけです。

では、どうすれば Reactive Data にすることができるでしょうか。

Reactive な data を登録する

以下のように書くことで、Reactive な data として登録ができます。そして登録された Reactive data は Vue template から参照できるようになります。

App.vue
<script>
const number = 2 * 10;
console.log(number);

export default {
  data() {
    return {
      vueNumber: number,
    };
  }
};
</script>

Reactive な data を複数登録することももちろん可能

App.vue
<template>
  <div id="app">{{ vueNumber }} {{ name }}</div>
</template>

<script>
const number = 2 * 10;
console.log(number);

export default {
  data() {
    return {
      vueNumber: number,
      name: "nakanishi"
    };
  }
};
</script>

{{}} ヒゲかっこを使って Reactive な data を参照する

App.vue
<template>
  <div id="app">{{ vueNumber }} {{ name }}</div>
</template>