Vue.jsでv-for中のデータ更新

Question

前提・実現したいこと

Vueのバージョン ： 2.9.6
したいこと : v-for中にデータを更新したい。

よろしくおねがいします。

発生している問題・エラーメッセージ

Error compiling template:

該当のソースコード

var hoge = new Vue({
	el:'#wrap',
	data:{
		info_data : [ { "id": 1,"num": "10", }, { "id": 2,"num": "20", }, { "id": 3,"num": "30", } ],
		last_num : '0',
	}
});

	<article :key="val.id" v-for='val in info_data'>
	  <div v-if="val.num != last_num">
		<span >{{val.num}}</span>
		<input v-model="last_num" v-bind:value="val.num">//ここでlast_numを更新したい
		//{{last_num = val.num}}とすると期待した動作をしますがエラーがでます
          [Vue warn]: You may have an infinite update loop in a component render function.
	  </div>
	</article>

Answer 1

v-modelは、デフォルトではvalueをinputイベントで更新するための省略構文(シュガーシンタックス)です。
jabaskliptさんの場合は、別途v-bind:valueをしているのでおかしくなっているのだと思います(エラーにいたる内部の詳細な動きは把握していません)。

上記の通りv-modelはただのシュガーシンタックスなので、自前で更新をかければ解決します。

<div id="wrap">
  <article :key="val.id" v-for='val in info_data'>
    <div v-if="val.num != last_num">
      <span >{{val.num}}</span>
      <input :value="val.num" @input="updateLastNum(val.num)">
    </div>
  </article>
</div>

var hoge = new Vue({
  el:'#wrap',
  data:{
    info_data : [ { "id": 1,"num": "10", }, { "id": 2,"num": "20", }, { "id": 3,"num": "30", } ],
    last_num : '0',
  },
  methods: {
    updateLastNum(num) {
    	this.last_num = num;
    }
  }
});

v-modelを、valueおよびinputイベント以外に使用したい場合こちらを参照してください。

追記(2018/11/24)

質問の意図が確定したので、改めて回答します。
結論から言うと、jabaskliptさんがやろうとしていることは、質問に記載されたやり方だとできません。

テンプレートの中でデータを変更するのではなく、
テンプレートで使用する前にデータを整形しておく必要があります。
以下の例では、2つ目の10(idが4の方)は表示されていません。

サンプル

補足

Vue.jsでは、あるデータが変更された場合、即座にレンダリング(DOMに反映)されません。
同じタイミングで起きるデータ変更すべてを一旦保存しておきます。
すべてのデータ変更が検知されたあとにレンダリング(DOMに反映)されます。
そのため、あるデータをレンダリングの最中に変更しても、そのレンダリング中に再利用することはできません。
次の更新に持ち越されるからです。
詳しくはこちらを参照してください。

Comments

[jabasklipt]

回答ありがとうございます！
ただ動かしてみると、他にどこかが悪さしているのかinputイベントが発火しないです。（エラーも無し）

[NozomuIkuta]

自分で確かめる限り動いていますが、
updateLastNum()メソッドでconsole.log()などしてみてください。
https://jsfiddle.net/NozomuIkuta/986japnm/

[jabasklipt]

すみません、質問の仕方が悪かったです。
追記した{{last_num}}がループ毎に10,20,30と表示されて欲しいという内容でした。
https://jsfiddle.net/7y3hr2fo/

[NozomuIkuta]

`last_num`は"0"ですので、変更しない限りずっと"0"のままですが、「{{last_num}}がループ毎に10,20,30と表示されて欲しい」とはどういった意味ですか？

[jabasklipt]

このv-forは3回ループすると思うのですが、
1ループする度にlast_numの値をval.numの値に変更したいという意味です。

[NozomuIkuta]

3回目のループでは`val.num`は"30"ですから、`last_num`も最終的には"30"になっていて欲しいということですね。
つまり`last_num`を`info_data`配列の最後のオブジェクトに基づいて設定したいということですか？

[jabasklipt]

＞`last_num`も最終的には"30"になっていて欲しい
そうです。
＞`last_num`を`info_data`配列の最後のオブジェクトに基づいて設定したい
いえ、<div v-if="val.num != last_num">の部分で１つ前のループのval.numと今回のループのval.numが同じ値だった時は<span >{{val.num}}</span>を表示しないという分岐を行いたいです。

[NozomuIkuta]

> いえ、<div v-if="val.num != last_num">の部分で１つ前のループのval.numと今回のループのval.numが同じ値だった時は<span >{{val.num}}</span>を表示しないという分岐を行いたいです。

もし`num`が 10, 10, 20, 30 だとしたら、2つ目の10を表示したくない、つまり、画面に表示される数字に重複がないようにしたいということですか？

[jabasklipt]

そうです！

[jabasklipt]

詳しくご回答いただいてありがとうございます！
そもそも仕組みを理解していなかったという事ですね。勉強になりました！

[NozomuIkuta]

解決したようでよかったです。
Vue.jsの公式サイトは、日本語版もあり、説明も丁寧なので、いつか通読されることをおすすめします。