vue中集合取第一个_vue2中,根据list的id进入对应的详情页并修改title方法

一般项目中,我们会遇到有个list。。。然后你随便点击一个,会进入他对应的详情页。。。正常,那个详情页是一个公共的组件,我们只需根据id传值来判断,这个页面显示的是哪个list的数据即可。如图:点击电影进入电影详情……以此类推

e944823145fbb5d3660a137b661a4132.png

c93fe279a5b8505c8522d1d14f981491.png

具体代码如下:

(有人会奇怪,我为什么不循环……这个是根据项目需求而定的,这个相当于入口,而进入里面分别对应的还是多个list,并且后台给的图片的url也不一样,我懒得v-if去写了,so,这三个我就用了通过了路由id过去。当然,后面有循环list。。两种不同的方式,大家根据自己的项目来选择就好微笑)

电影 • 纪录片

室内乐 • 下午茶

沙龙 • 讲谈

import api from './../fetch/api';

import { mapGetters } from 'vuex';

export default {

name: 'club',

data () {

return {

backMsg: {},

movie_url: '',

music_url: '',

sport_url: '',

}

},

computed: {

...mapGetters([

'getContextPathSrc',

'sessionId',

'token'

])

},

created() {

api.commonApi('后台接口url','params')

.then(res => {

this.backMsg = res.data;

// 电影图片

this.movie_url = res.data.IMG_LIST[0].IMG_URL;

// 室内乐

this.music_url = res.data.IMG_LIST[1].IMG_URL;

// 体育图片

this.sport_url = res.data.IMG_LIST[2].IMG_URL;

})

},

}

而路由index.js里面需要如下写:

{

path: 'itemList/:id',

name: 'itemList',

component: resolve => require(['components/club/itemList.vue'], resolve)

},

这样就完成了初步的列表进入对应的页面。有人会发现, 看我的截图,明显是有左右滑动的,这里是我把代码删掉了,因为那个不是我今天要巩固的= =。接下来,就是在对应页面是N个列表list,我们需要点击每个进入他所对应的详情页,而我也是用循环写的list(就是上面的第二张图片,推荐下的list太多了,不循环会死人的偷笑),具体代码如下:

推荐

经典

:bottom-method="loadBottom"

:bottom-all-loaded="allLoaded"

:bottomPullText='bottomText'

:auto-fill="false"

@bottom-status-change="handleBottomChange"

ref="loadmore">

uploading.gif

import api from './../../fetch/api';

import { mapGetters } from 'vuex';

import LoadMore from './../common/loadmore.vue';

import MovieType from './movieType.vue';

export default {

props:{

TYPE: Number,

backMsg: Array,

dataType: String,

loading: Boolean,

allLoaded: Boolean,

pageNo: Number,

},

data() {

return {

tActive: true,

lActive: false,

status: '',

bottomText: '上拉加载更多...',

};

},

computed: {

...mapGetters([

'getContextPathSrc',

'sessionId',

'token'

]),

},

components: {

LoadMore,

MovieType

},

methods: {

// 点击推荐按钮

toRecommend: function() {

this.tActive = true;

this.lActive = false;

this.$emit('toRecommend', {dataType: this.dataType, TYPE: this.TYPE});

},

// 点击经典按钮

toClassic: function() {

this.tActive = false;

this.lActive = true;

this.$emit('toClassic', {dataType: this.dataType, TYPE: this.TYPE});

},

// 加载更多的方法

loadBottom: function() {

alert(1)

this.$emit('loadBottom', {dataType: this.dataType, TYPE: this.TYPE});

},

handleBottomChange(status) {

this.bottomStatus = status;

},

},

};

这里我把循环出的列表写了个单独的组件。movieType组件内容如下:

{{item.NAME}}

city.png

{{item.CITY}}

time.png

{{item.START_DATE | movieTime}}-{{item.END_DATE | movieTime}}

import api from './../../fetch/api';

import { mapGetters } from 'vuex';

import LoadMore from './../common/loadmore.vue';

export default {

props:{

item: Object,

},

data() {

return {

};

},

computed: {

...mapGetters([

'getContextPathSrc',

'sessionId',

'token'

]),

},

};

当然,最重要的一步不能忘掉。。。我们需要修改路由index.js文件:

{

path: 'itemDetail/:ID',

name: 'itemDetail',

component: resolve => require(['components/club/itemDetail.vue'], resolve)

},

这样就大功告成了。两种方法,喜欢哪种用哪种就好。。

以上这篇vue2中,根据list的id进入对应的详情页并修改title方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
引用\[1\]和\[2\]提到了Vue的异步计算属性的实现细节,但并没有明确回答是否可以在Vue2的计算属性写异步方法。根据我对Vue2的了解,Vue2的计算属性是同步执行的,不支持直接写异步方法。计算属性的作用是根据依赖的数据动态计算出一个新的值,并将其缓存起来,当依赖的数据发生变化时,计算属性会重新计算并返回新的值。因此,计算属性的计算过程应该是同步的,不能包含异步操作。如果需要在计算属性进行异步操作,可以考虑使用Vue的watch属性或者使用异步方法来更新计算属性依赖的数据。 #### 引用[.reference_title] - *1* *2* [Vue3计算属性和异步计算属性](https://blog.csdn.net/qq_27368993/article/details/120833341)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Vue3响应式对象-计算属性和异步计算属性](https://blog.csdn.net/web2022050903/article/details/128715850)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值