数値、文字列などの値やオブジェクトなどのデータを格納するdata [Vue.js]

本記事では、Vue.jsで作成するアプリケーションの状態を定義するdataプロパティオプションについて紹介します。

1 dataプロパティオプション
2 dataオプションの書式
3 dataオプションのデータを定義する
4 データを表示するHTMLテンプレート
5 【補足】dataプロパティオプションの定義の記述

dataプロパティオプション

Vueのインスタンスを作成する際には、オプションオブジェクトを渡します。

Vue.createApp({
  // ここにオプションを渡す
}).mount('#app')

Vue.createApp({

// ここにオプションを渡す

}).mount('#app')

オプションオブジェクトにdataプロパティを定義することで、アプリケーションの様々な状態を管理・操作することができます。

Vueでは、このdataオプションに値やオブジェクトを定義してアプリケーションを構成していくのが基本です。
dataオプションに定義したデータを更新したり、加工したりすることで、様々動作をアプリケーションに与えることができます。
Vueで作成するアプリケーションでは、このdataオプションが必須になります。

dataオプションのプロパティをテンプレートから参照することで、UI（ユーザーインターフェース）でのデータ表示を行うことができます。
※ UI: HTMLで構成したUIの要素

dataオプションに設定した値（やオブジェクト）は、Vue.jsのリアクティブシステム上で管理されるようになります。dataオプションの値やオブジェクトが更新されると、Vue.jsがそれを自動で検知します。
リアクティブシステムによりVue.jsがdataオプションの値を自動で検知してくれるので、dataオプションの値を更新するとUIでの表示も更新されます。

dataオプションの書式

dataオプションには数値や文字列などの値、オブジェクト、関数などを指定することができます。

dataオプションは、次の書式で定義します。

data: function() {
  return {
    キー: 値,
  }
}

data: function() {

return {

キー: 値,

}

dataには複数の値を指定することができます。

data: function() {
  return {
    キー1: 値1,
    キー2: 値2,
    キー3: 値3
  }
}

data: function() {

return {

キー1: 値1,

キー2: 値2,

キー3: 値3

}

dataオプションのデータを定義する

ここでは、dataオプションにデータを定義する例をいくつか紹介しておきます。

文字列、数値を定義する

dataオプションに文字列と数値を定義します。
以下のサンプルコードでは、数値のcustomerIdと文字列のcustomerNameを定義しています。

Vue.createApp({
  data: function() {
    return {
      customerId: 123,
      customerName: 'abc xyz'
    }
  }
}).mount('#app')

Vue.createApp({

data: function() {

return {

customerId: 123,

customerName: 'abc xyz'

}

}).mount('#app')

オブジェクトを定義する

dataオプションにオブジェクトを定義します。
ここでは、文字列値のnameプロパティと数値のpriceプロパティを持つproductというオブジェクトを定義しています。

Vue.createApp({
  data: function() {
    return {
      product: {
        name: 'Yシャツ',
        price: 2500
      }
    }
  }
}).mount('#app')

Vue.createApp({

data: function() {

return {

product: {

price: 2500

}

}).mount('#app')

配列を定義する

dataオプションに配列を定義します。
ここでは、上記で定義したproductオブジェクトの配列を定義します。

Vue.createApp({
  data: function() {
    return {
      products: [
        {
          name: 'Tシャツ',
          price: 1500
        },
        {
          name: 'セーター',
          price: 3800
        },
        {
          name: 'ジーンズ',
          price: 5600
        }
      ]
    }
  }
}).mount('#app')

Vue.createApp({

data: function() {

return {

products: [

{

price: 1500

{

price: 3800

{

price: 5600

}

]

}

}).mount('#app')

または

var products = [
  {
    name: 'Tシャツ',
    price: 1500
  },
  {
    name: 'セーター',
    price: 3800
  },
  {
    name: 'ジーンズ',
    price: 5600
  }
]
Vue.createApp({
  data: function() {
    return {
      products: products
    }
  }
}).mount('#app')

var products = [

{

price: 1500

{

price: 3800

{

price: 5600

}

]

Vue.createApp({

data: function() {

return {

products: products

}

}).mount('#app')

データを表示するHTMLテンプレート

「dataオプションのデータを定義する」で定義したdataオプションの値を確認できるように、jsFiddleに貼り付ければすぐに確認できるHTMLテンプレートを掲載しておきます。

jsFiddleでVue.jsを利用する際の手順等については、以下の記事にまとめています。
ご興味のある方はご覧ください。

jsFiddle自体をご存じない方は、以下の記事も合わせてご覧ください。

文字列、数値を表示するサンプル

「文字列、数値を定義する」で作成したdataを表示するHTMLテンプレートになります。

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  <div>
    顧客ID: {{customerId}}
  </div>
  <div>
    顧客名: {{customerName}}
  </div>
</div>

<div>

顧客ID: {{customerId}}

</div>

<div>

顧客名: {{customerName}}

</div>

オブジェクトを表示するサンプル

「オブジェクトを定義する」で作成したdataを表示するHTMLテンプレートになります。

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  <div>
    商品名: {{product.name}}
  </div>
  <div>
    価格: {{product.price}}
  </div>
</div>

<div>

商品名: {{product.name}}

</div>

<div>

価格: {{product.price}}

</div>

配列を表示するサンプル

「配列を定義する」で作成したdataを表示するHTMLテンプレートになります。

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
<div>商品1の名称: {{products[0].name}}</div>
<div>商品1の価格: {{products[0].price}}</div>
<div>商品2の名称: {{products[1].name}}</div>
<div>商品2の価格: {{products[1].price}}</div>
<div>商品3の名称: {{products[2].name}}</div>
<div>商品3の価格: {{products[2].price}}</div>
</div>

<div>商品1の名称: {{products[0].name}}</div>

<div>商品1の価格: {{products[0].price}}</div>

<div>商品2の名称: {{products[1].name}}</div>

<div>商品2の価格: {{products[1].price}}</div>

<div>商品3の名称: {{products[2].name}}</div>

<div>商品3の価格: {{products[2].price}}</div>

</div>

【補足】dataプロパティオプションの定義の記述

dataオプションを定義するときは以下のように記述します。

data: function() {
  return {
    prop1: '',
    prop2: 0
  }
}

data: function() {

return {

prop1: '',

prop2: 0

}

dataオプションは関数として定義しますので「data: function()」と記述しますが、以下のように記述することもできます。

data() {
  return {
    prop1: '',
    prop2: 0
  }
}

data() {

return {

prop1: '',

prop2: 0

}

上記のコードでは「data: function()」を「data()」と記述しています。
「: function」の部分を省略して記述することができますので、少しではありますがコード量を減らすことができます。

Vue.js 入門 Tips 一覧

リンク