vue.js 0.11.x その0003 インスタンス初期化後にdataのプロパティを追加または削除する($addと$delete)

参考にさせて頂いたページ

お手軽データバインディングライブラリ「Vue.js」を使いこなそう（基礎編） (2/4)：CodeZine（コードジン）

http://vuejs.org/api/options.html

参考ページを元にdataのaプロパティを出力してみた

vue_sample.htmlの記述内容

messageだったところをaに変更した。

<div id="demo">
  <input v-model="a">
  <p>htmlエスケープされる通常の出力 v-textディレクティブと等価</p>
  {{a}}
  <br><br><br>
  <p>htmlエスケープされない出力 v-htmlディレクティブと等価</p>
  {{{a}}}
  <br><br><br>
  <p>一度だけのバインディング</p>
  {{* a}}
  <br><br><br>
</div>

vue_sample.jsの記述内容

var data = { a: 1 };
var vm = new Vue({
  el: '#demo',
  data: data
});
console.log(vm.$data === data); // -> true
// VMインスタンス自身のプロパティとしてアクセスできる
vm.a;  // -> 1
alert(vm.a);
vm.a++;

この段階での処理結果

ブラウザでページを閲覧したとき

{{a}}のところには2
{{{a}}}のところも2
{{* a}}のところは1

インスタンス生成後にdataのbプロパティを単純に追加してみた

vue_sample.htmlの記述内容

<div id="demo">
  a:<input v-model="a"><br>
  b:<input v-model="b">
  <p>htmlエスケープされる通常の出力 v-textディレクティブと等価</p>
  {{a}}<br>
  {{b}}
  <br><br><br>
  <p>htmlエスケープされない出力 v-htmlディレクティブと等価</p>
  {{{b}}}<br>
  {{{b}}}
  <br><br><br>
  <p>一度だけのバインディング</p>
  {{* a}}<br>
  {{* b}}
  <br><br><br>
</div>

vue_sample.jsの記述内容

以下のソースコードのコメント部分にあるように値は変化し、alertとconsole.logで出力されます。

var data = { a: 1 };
var vm = new Vue({
  el: '#demo',
  data: data
});
console.log(vm.$data === data); // -> true
// VMインスタンス自身のプロパティとしてアクセスできる
alert('vm.a:'+vm.a);//1
alert('vm.b:'+vm.b);//undefined
vm.a=2;
vm.b=1;
alert('vm.a:'+vm.a);//2
alert('vm.b:'+vm.b);//1

この段階での処理結果

ブラウザでページを閲覧したとき

{{a}}のところには2
{{{a}}}のところも2
{{* a}}のところは1

{{b}}のところには何も表示されません
{{{b}}}のところも何も表示されません
{{* b}}のところも何も表示されません

インスタンス初期化時に未定義のbプロパティは単純に追加しただけでは、
双方向バインディングされない
ということからきています。

仮にインスタンス初期化前に

var data = { a: 1, b: null};

とした場合は、

{{b}}
{{{b}}}
{{* b}}

がそれぞれ表示されます。

インスタンス初期化後に追加するプロパティを双方向バインディングする

たとえば以下のような感じに書くと、
初期化後にvm.bを追加しても双方向バインディングできるので、
vue_sample.html内の{{b}}には5が出力される。

var data = { a: 1 };
var vm = new Vue({
  el: '#demo',
  data: data
});
console.log(vm.$data === data); // -> true
// VMインスタンス自身のプロパティとしてアクセスできる
alert('vm.a:'+vm.a);//1
alert('vm.b:'+vm.b);//undefined
vm.a=2;
vm.$add("b", 1);
alert('vm.a:'+vm.a);//2
alert('vm.b:'+vm.b);//1
vm.b=5;

プロパティvm.bを削除したい場合は

vm.$delete("b");

みたいな感じ。

今回はここまで。