"recommend":[
{
"id": 1,
"cover": "http://p1.music.126.net/FoF5_ROj-jU37263LhInsw==/109951163203287436.jpg?param=140y140",
"playCount": "3655万",
"desc": "听首老歌 回味永不褪色的华语经典"
},
{
"id": 2,
"cover": "http://p1.music.126.net/sixunTcvD_IXeVqxZnpHkA==/109951163452086313.jpg?param=140y140",
"playCount": "3032万",
"desc": "助眠辑 | 自然音，伴灵动乐符萦绕耳畔"
},
{
"id": 3,
"cover": "http://p1.music.126.net/QcPJfzds8ejF1FPgBaXMTw==/109951163128461676.jpg?param=140y140",
"playCount": "3406万",
"desc": "古典清香 I 我的茶馆里住着巴赫与肖邦"
},
{
"id": 4,
"cover": "http://p2.music.126.net/08wpPWN0a3rOZ6nOo-Mh2g==/109951171292437751.jpg?param=140y140",
"playCount": "267",
"desc": " 投资笔记23：海外火热的“稳定币”，到底是个什么？"
},
{
"id": 5,
"cover": "http://p1.music.126.net/aao5Ku06P5PrMafCfT3MjQ==/18648816720698170.jpg?param=140y140",
"playCount": "2452万",
"desc": "「日语民谣」月色中的浅吟低唱"
},
{
"id": 6,
"cover": "http://p2.music.126.net/-BFe-lnr1V-eRFWK56Hnuw==/109951170707847109.jpg?param=140y140",
"playCount": "49万",
"desc": "001 抓周"
},
{
"id": 7,
"cover": "http://p1.music.126.net/WFvZtVo1_k6neT0641tKnQ==/109951171302151714.jpg?param=140y140",
"playCount": "4597万",
"desc": "用户105667433的歌单"
},
{
"id": 8,
"cover": "http://p2.music.126.net/9pDGk6ip65gdoIZETi1Kgw==/109951170473059608.jpg?param=140y140",
"playCount": "1503万",
"desc": "用户105667433的歌单"
}
],怎么样修改数据代码，实现点击改变内容效果<script setup>
import { ref, onMounted, watch } from 'vue';
const tags = ref(['华语', '流行', '摇滚', '民谣', '电子']);
const currentTag = ref('华语');
const recommendList = ref([]);
const loading = ref(true);
const error = ref(null);
const itemsPerPage = ref(8); // 两行，每行4个
const itemWidth = ref(160);
const defaultCover = 'https://picsum.photos/160/160?random=error';
// 获取推荐列表
const fetchRecommendList = async (tag = '华语') => {
loading.value = true;
error.value = null;
try {
const res = await fetch(`http://localhost:3000/recommend?tag=${tag}`);
const responseData = await res.json();
let parsedItems = [];
if (Array.isArray(responseData)) {
parsedItems = responseData;
} else if (responseData && Array.isArray(responseData.data)) {
parsedItems = responseData.data;
} else {
console.log('API原始响应:', responseData);
throw new Error('无法识别的推荐数据格式');
}
const validItems = parsedItems.filter(item =>
item.cover && item.desc && item.playCount
);
if (validItems.length === 0) {
throw new Error('API返回空数据或缺少必要字段');
}
recommendList.value = validItems;
} catch (err) {
console.error('请求失败:', err);
error.value = err.message || '加载推荐内容失败';
} finally {
loading.value = false;
}
};
const handleTagClick = (tag) => {
currentTag.value = tag;
fetchRecommendList(tag);
};
const handlePlay = (item) => {
console.log('播放推荐内容:', item);
};
const handleImageError = (item) => {
item.cover = defaultCover;
};
// 菜单交互
const toggleMenu = () => {
showMenu.value = !showMenu.value;
};
onMounted(() => {
fetchRecommendList(currentTag.value);
});
watch(recommendList, (newList) => {
console.log('推荐列表已更新，共', newList.length, '条数据');
});
</script>
点击阅读原文，输入关键词，即可搜索您想要的程序人生文章。
本文带你探索程序员世界中那些令人捧腹的幽默瞬间，通过趣味故事展现程序员独特的视角与智慧，让你在笑声中理解程序员的生活点滴。
扫一扫
314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
