从list组件点击查看更多路由到了Info组件永远都是显示的第一条新闻详情

来源:5-1 重点知识点回顾

kingchan

2019-04-06 08:25

<template>
    <div>
        <ul>
            <li v-for="(item,index) in pageLists"
                @click="look(index)"
                :class="{active: index == current && current !== ''}"
                :key="index">
                <span>{{item.title}}</span>
                <p>{{item.content}}</p>
                <small>{{dateTime}}</small>
                <a v-show="index == current && current !== ''" @click="lookMore()">
                    <small>查看更多>></small>
                </a>
            </li>
        </ul>
    </div>
</template>
<script>
    import store from '@/store'
    export default {
        name: "List",
        store,
        data () {
            return {
                current: '',
                dateTime: new Date().toLocaleString()
            }
        },
        computed: {
            pageLists () {
                return store.state.lists
            }
        },
        methods:{
            look (index) {
                this.current = index
            },
            lookMore () {
                this.$router.push('/info');
            }
        }
    }
</script>
<template>
    <div>
        <div v-for="(item,index) in pageLists"
             v-show="index == current"
             :key="index">
            <span>{{item.title}}</span>
            <p>{{item.content}}</p>
        </div>
        <div class="returnList" @click="returnList()">返 &nbsp; 回</div>
    </div>
</template>
<script>
    import store from '@/store'
    export default {
        store,
        name: "Info",
        data () {
            return {
                current: '',
            }
        },
        computed: {
            pageLists () {
                return store.state.lists
            }
        },
        methods:{
            returnList () {
                this.$router.push('/home/list')
            }
        }
    }
</script>


写回答 关注

3回答

  • Brian
    2019-04-06 14:39:57

    这里的道理很简单,因为你在Info页面没有告诉它要显示第几个啊。

    你的LoadMore方法只是把路由跳转了,并没有传参数啊,小伙伴。

    你要告诉Info页面,我现在点的第几个,你帮我展示一下下。

    kingch...

    谢谢老师,是这样? lookMore () { store.state.current = this.current this.$router.push('/info'); }

    2019-04-07 13:49:56

    共 1 条回复 >

  • 淡水狗
    2019-04-29 17:27:24

    解决了吗。 我ifon组件显示的是全部额

  • kingchan
    2019-04-07 13:49:16

    谢谢老师,是这样?

    lookMore () {

    store.state.current = this.current

    this.$router.push('/info');
    }


    Brian

    记住,改变vuex中state的唯一方式是mutation

    2019-04-08 09:34:23

    共 1 条回复 >

3小时速成 Vue2.x 核心技术

带你快速学习最流行的前端框架vue2.x的核心技术

82559 学习 · 487 问题

查看课程

相似问题