vue.js初心者なので教えて下さい。
input項目を監視して、データ入力inputの度にデータが更新される(=methodが動く)ことを防ぎたいと考えております。
いろいろ調べて、lodashを使用・wach/createdを使用し、methodの呼び出しを遅らせればできるというところまでわかりました。(https://jsfiddle.net/j0s8ay1n/9/ にも同じソースがあります)
HTML
1<script src="https://unpkg.com/vue"></script> 2<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script> 3 4<div id="app"> 5 <input type="input" v-model="keyword"> 6 <pre>{{ $data }}</pre> 7</div>
vue
1new Vue({ 2 el: '#app', 3 data: { 4 keyword: null, 5 message: null 6 }, 7 watch: { 8 keyword: function (newKeyword, oldKeyword) { 9 this.message = "Waiting for you to stop typing...." 10 this.debouncedGetAnswer() 11 } 12 }, 13 created: function(){ 14 this.debouncedGetAnswer = _.debounce(this.listupdate, 1000) 15 }, 16 methods: { 17 listupdate(){ 18 console.log('更新します') 19 this.message = null 20 } 21 } 22});
同じ仕組みを、v-forでループしているinput項目にもやりたい、と思っております。
下記のソースにデータに対して、どのように、watch/createを記述することで、実現できるのでしょうか?
(https://jsfiddle.net/9Laxj30z/ にも同じソースがあります)
HTML
1<script src="https://unpkg.com/vue"></script> 2 3<div id="app"> 4 <p v-for="list in lists"> 5 <input type="input" v-model="list.content" v-on:input="listupdate(list.id)"> 6 </p> 7 <pre>{{ $data }}</pre> 8</div>
vue
1new Vue({ 2 el: '#app', 3 data: { 4 lists: [ 5 {id: 1, content: "aaa"}, 6 {id: 2, content: "bbb"}, 7 {id: 3, content: "ccc"}, 8 {id: 4, content: "ddd"}, 9 ], 10 }, 11 methods: { 12 listupdate (listid) { 13 console.log(listid) 14 console.log('更新します') 15 } 16 } 17});
実現方法は、watchでなくてもなんでもよいと思っております。何卒よろしくお願い致します。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/26 06:54
2018/12/26 07:38
2018/12/26 07:56
2018/12/26 08:41 編集
2018/12/26 08:51 編集