2017-04-21 34 views
1

我在這方面很辛苦。Laravel 5.4和Vue.js 2.0發出的值而不是錯誤的實例

我的具體錯誤是在這段代碼:如果我會嘗試刪除它一切正常,但我需要顯示數據列。我不明白爲什麼會導致錯誤。

<select> 
     <option v-for="column in columns">{{ column }}</option> 
    </select> 

我app.js

import Vue from 'vue' 
import DataViewer from './components/DataViewer.vue' 

const app = new Vue({ 
    el: '#app', 
    components: { 

     DataViewer 
    }, 
    data: { 

    } 

}); 

我DataViwer.vue

<template> 
    <div class="dv"> 
    {{ title }} 
    </div> 
    <select> 
     <option v-for="column in columns">{{ column }}</option> 
    </select> 

</template> 

<script type="text/javascript"> 

    import Vue from 'vue' 
    import axios from 'axios' 
    export default { 

     props: ['source', 'title'], 
     data(){ 

      return { 

       model: {}, 
       columns: {} 
      } 
     }, 
     created(){ 
      this.fetchIndexData() 
     }, 
     methods: { 

      fetchIndexData(){ 

       var vm = this 
       axios.get(this.source) 
       .then(function(response){ 

        Vue.set(vm.$data, 'model', response.data.model) 
        Vue.set(vm.$data, 'columns', response.data.columns) 

        console.log(vm.$data.columns); 
       }) 
       .catch(function(response){ 

        console.log(response) 
       }) 
      } 
     } 
    } 

</script> 

我的AJAX結果:

enter image description here

回答