Vue.jsを触ってみる3 データ変更

やりがいは不要

2回目で超基本的な動きは確認できたのでデータの参照が確認できたので今回はデータの変更を試します。
テキスト入力欄を2つ用意してボタンを押すと入力した内容でデータを変更するような画面を作ります。

まずはsamlle.jsとindex.htmlを下記のように変更

samlle.js

var dataList = {
   data1 : "データ1",
   data2 : "データ2"
}

var app = new Vue({
   el : "#data",
   data : dataList,
   methods: {
       changeData: function () {
           this.data1 = this.$refs.value1.value;
           this.data2 = this.$refs.value2.value;
     }
   }
})
index.html

<!DOCTYPE html>
<html>
<head>
   <meta charset='utf-8'>
   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
   <title>ページタイトル</title>
   <script src='./lib/vue.js'></script>
</head>
<body>
   <div id="data">
       {{ data1 }} + {{ data2 }} 
       <input type="text" ref="value1">
       <input type="text" ref="value2"><button v-on:click="changeData">データ変更</button>
   </div>
</body>
<script src='./lib/sample.js'></script>
</html>

Vueオブジェクトのmethodsプロパティで定義した関数をv-on:clickで指定するのがポイント。
this.$refs.ref属性に指定した値で入力値が取得できるようです。

画面を開いてテキスト入力欄に変更したい値を入力しデータ変更ボタンをクリック。

画像1

データが変更されました。

画像2

次回はajax関連のサンプルを作る予定です。

この記事が気に入ったらサポートをしてみませんか？