Javascript & Vue初心者で、扱い方がよくわかっていません。どなたか詳しい方教えてもらえませんでしょうか?
ajaxでデータを一斉に書き換えたい時どうすれば良いか分りません。例えば、以下のようなコードがあるとします。
内容は「更新」ボタンを押すと、Ajaxでanimals内のデータが書き変わるというものです。
<html> <div id="test"> <div v-for="animal in animals">{{animal.name}}:{{animal.age}}</div> <button @click="ajaxToUpdateAnimals">更新</button> </div> </html> <script> var vm_test = new Vue({ el: '#test', data: { animals:{cat:{name:'Taro', age:1}, dog:{name:'Jiro', age:2}, mouse:{name:'Saburo', age:3}} }, methods: { ajaxToUpdateAnimals() { axios.patch(some_url, this.animals) .then(res => { // res.data = animals:[cat:{name:'Taro', age:1}, tiger:{name:'shiro', age:4}] this.animals = res.data.animals; }) .catch(error => { some_action }); }, } }); </script>
この場合、
this.animals = res.data.animals;
のところではレスポンシブに表示が切り替わってくれません。公式サイトではsetなどのメソッドを使えば良いと書かれてあったのですが、animals内の項目が増えたり、データ階層が5段、6段と増えたりすると、データを1つ1つ更新するのが大変です。
何か他の良い方法はありませんでしょうか?
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/14 07:09