vuejs tab选项切换，数据用get方式获取

vue-resource.js 获取方式

<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>

html代码 

    <div id="dynamic-component-demo">
      <button
        v-for="tab in tabs"
        v-bind:key="tab"
        v-bind:class="['tab-button', { active: currentTab === tab }]"
        v-on:click="currentTab = tab"
      >{{ tab }}</button>

      <keep-alive>
        <component
          v-bind:is="currentTabComponent"
          class="tab"
        ></component>
      </keep-alive>
    </div>

vuejs代码

var childPosts = {
  data: function () {
  	return {
      posts: [
        {
        	id: 1,
          title: 'Cat Ipsum'
        },
        {
        	id: 2,
          title: 'Hipster Ipsum'
        },
        {
        	id: 3,
          title: 'Cupcake Ipsum'
        }
      ],
      ajaxdata:[null],
      taburl:['/json/1.1.1.json','/json/1.1.2.json','/json/1.1.3.json'],
      selectedPost: 'Cat Ipsum'
    }
  },
  created:function(){
    this.getData(this.taburl[0])
  },
  methods:{
    getData:function(url){
      this.$http.get(url).then(function(res){
        this.ajaxdata = res.body;
       },function(){
           console.log('请求失败处理');
       });
    },
    selectClick:function(post,index){
      this.selectedPost = post
      var taburl = this.taburl[index];
      this.getData(taburl);
    }
  },
	template: `
  	<div class="posts-tab">
      <ul class="posts-sidebar">
        <li
          v-for="(post,index) in posts"
          v-bind:key="post.id"
          v-bind:class="{ selected: post === selectedPost }"
					v-on:click="selectClick(post,index)"
        >
          {{ post.title }}
        </li>
      </ul>
      <div class="selected-post-container">
      	<div
        	v-if="selectedPost =='Cat Ipsum'"
          class="selected-post"
        >
        <div class="pass-contain" v-for="(item,index) in ajaxdata">
        <a class="link-href" :href="\'documentdetail-manage.html?dockey=\'+item.Record.key" target="_blank">{{item.Record.title}}</a>
        <span>{{item.Record.date}}</span>{{item.Record.enterprise}}
        </div>
        </div>
        <div
          v-else-if="selectedPost"
          class="selected-post"
        >
        <div class="pass-contain" v-for="(item,index) in ajaxdata">
        <a class="link-href" :href="\'documentdetail-manage.html?dockey=\'+item.Record.key" target="_blank">{{item.Record.title}}</a>
        <span>{{item.Record.date}}</span>{{item.Record.enterprise}}
        </div>
      </div>
    </div>
  `
}

var childArchive = {
  template: '<div>Archive component</div>'
}


new Vue({
  el: '#dynamic-component-demo',
  data: {
    currentTab: 'Posts',
    tabs: ['Posts', 'Archive']
  },
  computed: {
    currentTabComponent: function () {
      return 'tab-' + this.currentTab.toLowerCase()
    }
  },
  components:{
    "tab-posts":childPosts,
    "tab-archive":childArchive
  }
})

main.js 的代码

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import axios from 'axios'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'
import 'bootstrap3/dist/css/bootstrap.css'
import './assets/css/ledger.css'

// import '../static/css/AdminLTE.min.css'
import '../static/css/dataTables.bootstrap.min.css'

Vue.use(ElementUI)

Vue.config.productionTip = false
Vue.prototype.$ajax = axios

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

axios方式(建议用此方法获取数据)
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  getData:function(url){
      var _this = this;
      axios.get(url).then(function(response){
          _this.ajaxdata = response.data;
      }).catch(function (error) {
                            console.log(error);
                        });

    },

 或者

  getData:function(url){
      axios.get(url)
        .then(function(response){
              this.ajaxdata = response.data;
          }.bind(this))
        .catch(function (error) {
                    console.log(error);
         });

    },

或者箭头函数

  getData:function(url){
      axios.get(url)
        .then((response) => {
              this.ajaxdata = response.data;
          })
        .catch(function (error) {
                    console.log(error);
         });

    },

有待改进，记录一下