テストエンジニアだけどフロントエンドとかやりたい。ということで、Vue.jsをぽちぽち勉強中です。
今回は、自分で定義したメソッドを、v-onディレクティブを使って呼ぶ方法をやりました。
参考にしているのはこちら。
Adding new shopping list items using the v-on directive
v-onディレクティブを使って、項目追加を出来るようにする。
何を作るにもおそらく必須になる処理。
app.jsにmethods:を追加。
methodsは「オプションオブジェクト」のひとつ。Vueインスタンスを生成するときに渡す。
ここで作ったaddItemメソッドを、HTMLから呼ぶ。
このときにv-onディレクティブを使う。
の項を参照。
addItemを、エンターキーを押下したときと、ボタンを押したときの２箇所で呼び出している。
【メモ】
これだと、日本語入力中に漢字変換などしてEnterを押してもアイテムが追加されてしまうので、その点は良くない。
日本語を想定する場合には、ボタンのみで登録するなり、Ctrl+Enterで追加にするなり、何かしらの対応が必要そう。
app.js
var data = {
items: [{ text: 'Bananas', checked: true },
{ text: 'Apples', checked: false }],
title: 'My Shopping List',
newItem: ''
};
new Vue({
el: '#app',
data: data,
methods: {
addItem: function() {
var text;
text = this.newItem.trim();
if (text) {
this.items.push({
text:text,
checked:false
});
this.newItem = '';
}
}
}
});
index.html
<div id="app" class="container">
<h2>{{ title }}</h2>
<div class="input-group">
<input v-model="newItem" v-on:keyup.enter="addItem" placeholder="add shopping list item" type="text" class="form-control">
<span class="input-group-btn">
<button v-on:click="addItem" class="btn btn-default" type="button">Add!</button>
</span>
</div>
<ul>
<li v-for="item in items" v-bind:class="{ 'removed': item.checked }">
<div class="checkbox">
<label>
<input type="checkbox" v-model="item.checked"> {{ item.text }}
</label>
</div>
</li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="app.js"></script>
