質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

1回答

433閲覧

ajaxでデータを一斉に書き換えたい時の方法について

yusukechief

総合スコア16

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

0クリップ

投稿2017/10/14 06:47

編集2022/01/12 10:55

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つ更新するのが大変です。

何か他の良い方法はありませんでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

lang

1 data: { 2 animals:[cat:{name:'Taro', age:1}, dog:{name:'Jiro', age:2}, mouse:{name:'Saburo', age:3}] 3 },

[cat: ###, dog: ###, mouse: ###]は文法的に間違っているので、おそらく syntax error が出ると思いますが、出ていませんか?

代わりに{cat: ###, dog: ###, mouse: ###}としてください。

##追記
やり方としては間違っていないはずです。同じようなものを作ってみましたが上手くいきました。

Demo

原因として考えられるのはajaxでデータが取得できていない、返ってきたデータが{animals:{cat:{name:'Taro', age:1}, tiger:{name:'shiro', age:4}}}の形をしていない、などです。

エラーは表示されていませんか?

chromeならVue.jsのdevtoolsを使うと、現在ページにあるコンポーネントのdataをチェックできます。
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja

投稿2017/10/14 07:03

編集2017/10/14 07:45
karamarimo

総合スコア2551

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yusukechief

2017/10/14 07:09

タイポでした、書き直しました。ご指摘ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問