###前提・実現したいこと
Vue.jsのテキストボックスにサーバーから取得したデータを表示したいのですが、その前にまずaxiosのポストした処理のthenでなぜかデータが反映されません。
###発生している問題・エラーメッセージ
vue側でデータの再描画が行われない
###該当のソースコード
Html
1<script src="https://npmcdn.com/vue/dist/vue.js"></script> 2<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"></script> 3<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 4<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 5 <div class="container" id="app"> 6 <div class="row"> 7 <div class="col-sm-5 offset-sm-1"> 8 <div class="card"> 9 <div class="card-header">顧客一覧</div> 10 <div id="app"> 11 <div style="overflow: auto; width:auto; height: 200px;"> 12 <ul class="list-group" id="consumerList"> 13 <li style="height: 50px" class="list-group-item" 14 v-on:click="consumerListClick(index)" v-for="(num,index) in displayList"> 15 <a href="#">{{index}}:{{num}}</a> 16 </li> 17 </ul> 18 </div> 19 </div> 20 </div> 21 </div> 22 <div class="col-sm-5"> 23 <div class="card"> 24 <div class="card-header">顧客詳細情報</div> 25 <div id="app"> 26 <input type="text" v-model="costomerInfomationCompted" class="form-control" placeholder="顧客名"> 27 </div> 28 </div> 29 </div> 30 </div> 31 </div> 32
Javaxcript
1var cosutomerInfomationList = ['1','2']; 2var clickCostomerInfomation ='test'; 3var costomerNameList = ['1','2']; 4function CosutomerInfomation() { 5 this.id='-100'; 6 this.name='dummy_name'; 7 this.gender='E'; 8 this.birthday='1990-01-01'; 9} 10 11 12 13new Vue({ 14 el: '#app', 15 data: function () { 16 return { 17 cosutomerInfomationList: cosutomerInfomationList, 18 costomerNameList:costomerNameList, 19 clickCostomerInfomation:clickCostomerInfomation, 20 } 21 }, 22 computed: { 23 displayList: function () { 24 this.cosutomerInfomationList.forEach( 25 function (cosutomerInfomation) { 26 // this.costomerNameList.push(cosutomerInfomation.name); 27 } 28 ); 29 return this.costomerNameList; 30 }, 31 costomerInfomationCompted: { 32 get: function() { 33 return this.clickCostomerInfomation; 34 }, 35 set : function(newValue) { 36 this.clickCostomerInfomation = newValue; 37 } 38 }, 39 40 41 42 }, 43 methods: { 44 getCostomerInfomaitonAll: function (num) { 45 axios.post('/api/post/getjson', { id: '-1', name: '', gender: '', birthday: '' }) 46 .then(function (response) { 47 console.log(response); 48 this.cosutomerInfomationList.splice(0); 49 this.costomerNameList.splice(0); 50 for(var i=0;i<response.data.length;i++){ 51 this.cosutomerInfomationList.push(response.data[i]); 52 this.costomerNameList.push(response.data[i].name); 53 } 54 Vue.set(this,clickCostomerInfomation,'new message');//ここが反映されない 55 this.clickCostomerInfomation = 'new message';//ここが反映されない 56 this.costomerInfomationCompted='a';//ここが反映されない 57 this.$nextTick();//ここが反映されない 58 vue.$forceUpdate()//ここが反映されない 59 }) 60 .catch(function (error) { 61 console.log(error); 62 63 }); 64 }, 65 66 consumerListClick: function (num) { 67 // メソッド内の `this` は、 Vue インスタンスを参照します 68 thix.getCostomerInfomaitonAll(0); 69 // `event` は、ネイティブ DOM イベントです 70 }, 71 }, 72}) 73 74
###試したこと
computedでどうにかしようとしたり、nexttickを使ってみたり、forceupdateを使ってみたりしましたが、なぜか入れ直したデータで再描画されません。
###補足情報(言語/FW/ツール等のバージョンなど)
Vue.js v2.5.2
Bootstrap 4.0.0-beta.2
jquery 3.2.1
axios v0.17.1
回答1件
あなたの回答
tips
プレビュー