{classformlist.value?.map((item: any) => { return classformlist.value.length > 0 ? ( <div class="classroom"> <div class="classroom-name">{item.Name}</div> <div class="classroom-content"> <ClockCircleOutlined /> <span class="classtext"> 时间:{item.BeginTime + '-' + item.EndTime.substr(10, 14)} </span> </div> <div class="classroom-content"> <ClockCircleOutlined /> <span class="classtext">地点:{item.Address}</span> </div> <div class="classroom-content"> <ClockCircleOutlined /> <span class="classtext">线上地址:{item.OnlineAddress}</span> </div> <div class="classroom-content"> <ClockCircleOutlined /> <span class="classtext">备注:{item.Remark}</span> </div> </div> ) : ( <Empty description={<p style={{ marginTop: '40px' }}>暂无回复</p>} image={<Icon size={160} type="icon_wutaolun"></Icon>} ></Empty> ); })}为什么暂无回复没有在页面中显示
时间: 2024-02-16 22:26:59 浏览: 30
根据代码片段来看,如果`classformlist.value`为空数组,则`Empty`组件会被渲染,否则会渲染`classroom`组件。但是,如果`classformlist.value`是`undefined`或`null`,则不会渲染任何内容,也就是说不会渲染`Empty`组件。因此,你需要确保`classformlist.value`有一个初始值,例如空数组`[]`,以便在页面中正确地渲染`Empty`组件。
相关问题
setup(props: any) { // const getPostList = async () => { // let res = await apiFn(props.api, { // ...props.query, // }); // if (res.Result) { // } // }; const classformlist = ref<any[]>([]); watch( () => props.List, (news: any, olds: any) => { setTimeout(() => { classformlist.value = news; }, 200); console.log(news, olds, 'classformlist.value '); }, ); return () => ( <> {JSON.stringify(classformlist.value)} {classformlist.value?.map((item: any) => { <div class="classroom"> <div class="classroom-name">{item.Name}</div> <div class="classroom-content"> <ClockCircleOutlined /> <span class="classtext"> 时间:{item.BeginTime + '-' + item.EndTime.substr(10, 14)} </span> </div> <div class="classroom-content"> <ClockCircleOutlined /> <span class="classtext">地点:</span> </div> <div class="classroom-content"> <ClockCircleOutlined /> <span class="classtext">线上地址:</span> </div> <div class="classroom-content"> <ClockCircleOutlined /> <span class="classtext">备注:</span> </div> </div>; })} </> ); },
这段代码是一个 Vue 组件的 setup 函数,它接收一个 props 对象作为参数。在这个函数中,定义了一个 ref 类型的变量 classformlist,它是一个空数组。然后使用 watch 监听 props.List 的变化,当它发生变化时,将新的值更新到 classformlist 中。最后,返回一个 JSX 模板,在这个模板中,使用 map 方法遍历 classformlist 数组,将每个元素渲染成一个包含课程信息的 div 元素。其中,课程的名称、开始时间、结束时间、地点、线上地址和备注等信息都通过 item 对象来获取。
优化此代码 const openKeys = ref<string[]>([]) const selectedKeys = ref<string[]>([]) const { currentMenu, currentMenuTree, currentMenuList } = storeToRefs( useLayoutStore(), ) const rootSubmenuKeys = currentMenuList.value.filter((v: any) => { if (v.type === 0) { return v.parentId } }) watch( () => currentMenu, () => { openKeys.value = [currentMenu.value?.parentId] selectedKeys.value = [currentMenu.value?.id] }, { immediate: true }, ) const router = useRouter() /** * 点击事件 * @param e 事件对象 */ const handleClick = (e: any) => { const item = currentMenuList.value.find((_) => _.id === e.key) if (item) { router.push(item.path) } } /** * SubMenu 展开/关闭的回调 * @param e 展开的openKeys */ const onOpenChange = (e: any) => { const latestOpenKey = e.find((key: any) => openKeys.value.indexOf(key) === -1) if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) { openKeys.value = e } else { openKeys.value = latestOpenKey ? [latestOpenKey] : [] } }
There are a few optimizations that could be made to this code:
1. Instead of using `ref` for `openKeys` and `selectedKeys`, you can use `reactive` to make the code more concise:
```
const state = reactive({
openKeys: [],
selectedKeys: [],
})
```
2. Instead of using `storeToRefs` to convert the store state to refs, you can use the `toRefs` function, which is shorter and more concise:
```
const { currentMenu, currentMenuTree, currentMenuList } = toRefs(useLayoutStore())
```
3. Instead of using `watch` to watch the `currentMenu` state changes, you can use a computed property to update the `openKeys` and `selectedKeys` arrays:
```
const selectedMenu = computed(() => {
const item = currentMenuList.value.find((_) => _.id === currentMenu.value?.id)
return [item?.id] || []
})
const parentMenu = computed(() => {
const item = currentMenuList.value.find((_) => _.id === currentMenu.value?.parentId)
return [item?.id] || []
})
watch([selectedMenu, parentMenu], ([selected, parent]) => {
state.selectedKeys = selected
state.openKeys = parent
})
```
4. Instead of using `router.push` in the `handleClick` function, you can use the `router.push` method directly in the template:
```
<Menu.Item :key="item.id" :to="item.path">{{ item.name }}</Menu.Item>
```
5. Finally, instead of using `rootSubmenuKeys` to filter the list of menu items, you can use a computed property to filter the list of menu items based on their type:
```
const subMenuItems = computed(() => {
return currentMenuList.value.filter((v: any) => v.type === 0 && v.parentId)
})
```
By applying these optimizations, the code can be simplified and made more concise.
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
const activeIndex=Vue.ref(0);
// console.log(activeIndex.valuea);
function toggleActive(index){
if(activeIndex.value===index){
activeIndex.value=null;
}else{
activeIndex.value=index;
console.log(activeIndex);
console.log(activeIndex.value);
}
const lis =document.querySelectorAll(".clearfix li")
for(let i=0;i{{option.category_title}}
和
{{option2.subtitle}}
{{option2.title}}
{{option2.summary}}
{{option2.subtitle}}
{{option2.title}}
{{option2.summary}}
实现tab切换
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
找出这串代码的错误并给出正确答案<!DOCTYPE html> <?php session_start(); $order = $_SESSION['cart']; $sum = 0?> <html> <head> <meta charset="UTF-8"> <title>PHP购物</title> </head> <body> 购物车
返回商品列表 <tbale> 商品名 售价 数量 <?php foreach($order as $key => $value):?> <?php echo $value['name'];?> ¥<?php echo $value['price'];?> - <?php echo $value['num'];?> + <?php endforeach;?> <form action="updCart.php" method="get"> <input type="submit" value="结算"> </form> </body> </html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)