2 sonaxh sonaXH 于 2017.09.06 10:02 提问

webpack+ vue tab数据传输问题 1C

vue 请求一个 json 怎么把数据分开显示在tab切换中

 <template>
  <section class="wh-section wh-forum">
    <TabGroup>
      <li v-on:click="tab(index)">
        <span>待办</span>
        <em>{{ loadToReadNum() }}</em>
      </li>
      <li v-on:click="tab(index)">
        <span>待阅</span>
        <em>{{ loadToDoNum() }}</em>
      </li>
    </TabGroup>  
    <Search /> 
    <ul class="listitem">
      <li v-for="(item, index) in forumlist.items" >
        <div>
          <p>{{ item.title }}</p>
          <p><span>{{ item.times }}</span><em>{{ item.status }}</em><em>{{ item.em }}</em></p>
        </div>
      </li>
    </ul> 
  </section> 
</template>
<script>
  import {
    GET_FORUM_TODO
  } from '@/scripts/constant';

  import Search from "@/components/Search";
  import TabGroup from "@/components/TabGroup";
  import { mapState } from 'vuex';

  export default{
    computed: {
      ...mapState(['forumlist'])
    },
    created () {
      this.$store.dispatch(GET_FORUM_TODO);
    },
    methods: {
      loadToReadNum: function () {
        return this.$store.getters.toRead.length;
      },
      loadToDoNum: function () {
        return this.$store.getters.toDo.length;
      },
      tab: function (index) {
        this.selected = index; 
      }
    },
    components: { Search, TabGroup }
  };
</script>

1个回答

devmiao
devmiao   Ds   Rxr 2017.09.06 23:48
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
使用Webpack创建vue的tab选项
首先创建主页模板:html<template> <div> <!-- 导航栏 --> <ul> <li @click="toggleTabs(tab01Text)">{{tab01Text}}</li> <li @click="toggleTabs(tab02Text)">{{tab02T
webpack + vue项目搭建源码
webpack + vue项目搭建源码
vue环境搭建(webpack)
vue环境搭建(webpack)
vue-webpack模板
vue 组件化 webpack 模板
Vue2+VueRouter2+webpack 构建项目实战(六)加入tab栏切换,拓展项目
本文参考 fungLeo大神的博客,本人现在学习vue,仅仅当做笔记。大神链接:http://blog.csdn.net/fungleo/article/details/53171052 好了,开始开动吧!!! 首先安装以下目录创建文件夹 然后相应的文件里面加入代码 //happy.vue user happy page //index.vue 这个就是更加详细的页
vue如何引入echarts(vue+webpack4.0+iview2.14+vuex+es6+stylus架构三)
第一步:引入echart依赖cnpm i echarts --save第二步:使用ecahrtsrc/main.js import echarts from 'echarts' Vue.prototype.$echarts=echarts解释:    在main.js中引入echarts, 然后赋值到Vue的原型上面,在页面就可以使用this.$echarts获取到了第三步:实例效果和代码&amp;lt;...
基于Vue + Webpack简单聊天室
基于Vue + Webpack构建的简单chat示例,聊天记录保存在localStorge。简单演示了Vue的基础特性和webpack配置。
用webpack打包vue项目后,静态资源路径失效问题
当时正在做一个vue的移动端项目,用npm run build打包后,发现有些在dev环境下可用的静态资源失效,经过调试后,发现在vue-cil生成的项目结构中,找到build目录,在build目录下找到utils.js中的ExtractTextPlugin.extract({}),里面添加下面这个属性就完美解决了publicPath: '../../'
高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间
本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! 接上回 《高性能流媒体服务器EasyDSS前端重构(一)-从零开始搭建 webpack + vue + AdminLTE 多页面脚手架》在上一篇博客中, 我们白手起家, 从零搭建了 webpack + vue + AdminLTE 多页面脚手架. 代码在这里:
vue+webpack打包路径问题
最近写了一个vue小项目,不想单独作为一个web项目发布,所以就准备放到资源项目的public文件夹下,遇到一些小问题,在此总结一下。 资源路径如下:public目录配置的访问路径为”/”,在这样的情况下,我们的访问路径就变成了”域名/vue-demo”。访问的时候发下程序未报错,但是页面一片空白。此前也这样发布的项目都没有问题,但这次是怎么回事呢?仔细探索后发现是vue-router搞得鬼。因项目