vue.js - vue 使用tab组件切换读取本地json数据

问题描述

问 题

我是参考 http://blog.csdn.net/qq_16559... 实现Tab切换

我是新手，想向大家请教两个问题：

• 目前代码报错，read property 'push' of undefined name is not defined，不知道是不是this和self的地方处理的不对

• 另外，考虑到a.vue和b.vue只是读取的json的名称不一样，不知道是否有更合适的办法来重用，代码有不合适或者需要改进的地方，也烦请诸位多多指正。

App.vue 如下：

<template>
  <div id="app">
    <div class="top">
      <ul>
        <li @click='tabToggle("a");'>A</li>
        <li @click='tabToggle("b");'>B</li>
      </ul>
    </div>
    <div>
      <component :is='currentView' keep-alive></component>
    </div>
  </div>
</template>

<script>
import A from './component/A.vue';
import B from './component/B.vue';

export default {
  name: 'app',
  data () {
    return {
      currentView: 'a',
    }
  },
  created: function () {
    this.getData();
  },
  components: {
    a: A,
    b: B
  },
  methods: {
      tabToggle: function(tabText) {
          this.currentView = tabText
      }
  }
}
</script>

A.vue如下：

<template>
    <div id="a">
        <h1>{{ name }}</h1>
        <h2>{{ desc }}</h2>
        <table>
            <thead>
            <tr>
                <td>Name</td>
                <td>Status</td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in itemList" :id="item.id" style="">
                <td>{{item.name}}</td>
                <td>{{item.after[0].result.status}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        name: 'a',
        data () {
            return {
                itemList:[],
                name,
                desc
            }
        },
        created: function () {
            this.getData();
        },
        methods: {
            getData:function () {
                var self = this;
                this.$http.get("data/a.json").then(function (res) {
                    self.name = res.body[0].name;
                    self.desc = res.body[0].description;
                    for(var i= 0,len=res.body[0].elements.length;i<len;i++){
                        var resultData = res.body[0].elements[i];
                        self.itemList.push(resultData);
                    }
                })
            }
        }
    }
</script>

非常感谢！

解决方案

报错的原因楼上正解,定义就好了

 data () {
    return {
        itemList:[],
        name: '',
        desc: ''
    }
}

获取json可以在父组件做：

getData:function (url) {
    var self = this;
    this.$http.get(url).then(function (res) {
        self.name = res.body[0].name;
        self.desc = res.body[0].description;
        for(var i= 0,len=res.body[0].elements.length;i<len;i++){
            var resultData = res.body[0].elements[i];
            self.itemList.push(resultData);
        }
    })
}

这样接口就可以重用，然后把接口返回来的数据传给子组件即可。
然后还可以在传一个type，通过type来把接口传回来的数据付给不同的字段，再根据字段判断是否为空而是否继续访问接口，这样两个接口只要访问一次，有数据后再也不用访问，然后担心会子组件有更新json的情况，在原来基础上加上更新的功能传过去即可

props的用法：
父组件 <xxx :aaa="你要的数据"></xxx>
子组件： props: ['aaa']

这篇关于vue.js - vue 使用tab组件切换读取本地json数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！