为何子组件中获取不到数据?、<!--游戏排行卡片区域--> <div class="card-three"> <!--排行榜卡片01--> <MyCard01 :dataList="this.typeList" style="margin-left: 20px"></MyCard01> <!--排行榜卡片02--> <MyCard02 style="margin-left: 20px"></MyCard02> <!--排行榜卡片03--> <MyCard03 style="margin-left: 20px"></MyCard03> </div> //data属性数据 data() { return { //首页游戏排行的数据列表 typeList: [], }; }, //事件函数 methods: { //首页游戏排名数据 getIndexGameRankList() { this.$http({ //请求方式 method: "GET", //请求地址 url: myapi.getIndexGameRankList, }) .then((response) => { //首页游戏排行的数据列表 this.typeList = response.data.data; }) .catch((error) => {}); }, }, //计算属性 computed: {}, //监听器 watch: {}, //生命周期函数(组件创建后)-->【常用】 //可正常访问props、data、methods等(如:调用methods,发起axios请求,向data中存数据) created() { this.getIndexGameRankList(); },
时间: 2024-04-16 22:24:42 浏览: 16
在子组件中无法获取到数据的原因可能有几个可能的原因:
1. 检查子组件的props是否正确设置:确保子组件的props名称与父组件传递的属性名称一致,并且确保在父组件中传递了正确的属性值。
2. 检查子组件是否正确引用了父组件的data属性:在你的代码中,你在子组件中使用了`this.typeList`来引用父组件的data属性。请注意,在模板中,不需要使用`this`关键字来引用父组件的data属性。你可以直接使用`typeList`来访问该属性。
例如,将`<MyCard01 :dataList="this.typeList" style="margin-left: 20px"></MyCard01>`更改为`<MyCard01 :dataList="typeList" style="margin-left: 20px"></MyCard01>`。
3. 确保父组件中的数据已经成功获取:在你的代码中,你在父组件的`created`生命周期函数中调用了`getIndexGameRankList`方法来获取数据。请确保该方法成功获取到数据,并将其赋值给`typeList`属性。你可以在父组件中添加一些日志输出,以便检查是否成功获取到数据。
如果以上步骤都没有解决问题,请提供更多关于问题的详细信息,以便我能够更好地帮助你解决问题。
相关问题
现有一段bootstrap代码: <!--/.direct-chat-messages--> <div class="direct-chat-red col-md-12 mx-1.5"> <!-- /.card-header --> <!-- Message to the right --> <div class="direct-chat-msg right"> <!--简头向右--> <div class="direct-chat-infos clearfix"> @* <span class="direct-chat-name float-left">评价</span> <!--左上文字--> *@ @* <span class="direct-chat-timestamp float-Right">23 Jan 2:05 pm</span> <!--右上文字--> *@ <div class="text-right"> <input type="submit" id="btpj" value="评价" class="btn btn-dark btn-sm" /> </div> </div> <!-- /.direct-chat-infos --> <!-- /.direct-chat-img --> <div class="direct-chat-text form-control" id="tit"> <!--评级显示--> </div> </div> </div> 但是当前的按钮submit却不在这个元素的红色范围内,如何让其重叠到元素内右置
你可以将按钮放在 `direct-chat-infos` 元素中,并设置 `text-right` 类,这样按钮就会被右对齐并覆盖在消息框的右侧。代码如下:
```html
<!--/.direct-chat-messages-->
<div class="direct-chat-red col-md-12 mx-1.5">
<!-- /.card-header -->
<!-- Message to the right -->
<div class="direct-chat-msg right"> <!--简头向右-->
<div class="direct-chat-infos clearfix">
<!-- <span class="direct-chat-name float-left">评价</span> <!--左上文字-->
<!-- <span class="direct-chat-timestamp float-Right">23 Jan 2:05 pm</span> <!--右上文字-->
<div class="text-right">
<input type="submit" id="btpj" value="评价" class="btn btn-dark btn-sm" />
</div>
</div>
<!-- /.direct-chat-infos -->
<!-- /.direct-chat-img -->
<div class="direct-chat-text form-control" id="tit">
<!--评级显示-->
</div>
</div>
</div>
```
注意,你可能需要根据实际情况调整元素的样式和大小,以确保按钮可以完全覆盖在消息框的右侧。
使用python bs4库从下面这段内容“<div class="maingrid" data-v-0f3d927f=""> <!-- --> <!-- --> <!-- --> <div class="period" data-v-0f3d927f=""> Saturday, Jun 3, 2023 </div> <div class="summary summarykpis4" data-v-0f3d927f=""> <div class="icon" data-v-0f3d927f=""> <div class="partly-cloudy-day" data-v-0f3d927f=""> </div> </div> <div class="kpi summary" data-v-0f3d927f=""> <div class="subtitle"> Max </div> <div> 28℃ </div> <div class="normals"> <div> 22 </div> <div> 27 </div> <div> 36 </div> <div class="subtitle"> Min </div> <div class="subtitle"> Mean </div> <div class="subtitle"> Max </div> </div> </div> <div class="kpi summary" data-v-0f3d927f=""> <div class="subtitle"> Min </div> <div> 13℃ </div> <div class="normals"> <div> 9.9 </div> <div> 15 </div> <div> 19 </div> <div class="subtitle"> Min </div> <div class="subtitle"> Mean </div> <div class="subtitle"> Max </div> </div> </div> <div class="kpi summary" data-v-0f3d927f=""> <div class="subtitle"> Rain </div> <div> 0mm </div> <div class="normals"> <div> 0 </div> <div> 4.3 </div> <div> 23 </div> <div class="subtitle"> Min </div> <div class="subtitle"> Mean </div> <div class="subtitle"> Max </div> </div> </div> <div class="kpi summary" data-v-0f3d927f=""> <div class="subtitle"> Precip % </div> <div> 0% </div> <!-- --> </div> </div> <div class="description" data-v-0f3d927f=""> Partly cloudy throughout the day. </div> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> </div>”提取出6月3至6月5日天气信息
首先,我们需要将这段内容转化为 BeautifulSoup 对象。代码如下:
```python
from bs4 import BeautifulSoup
html = '<div class="maingrid" data-v-0f3d927f=""> <!-- --> <!-- --> <!-- --> <div class="period" data-v-0f3d927f=""> Saturday, Jun 3, 2023 </div> <div class="summary summarykpis4" data-v-0f3d927f=""> <div class="icon" data-v-0f3d927f=""> <div class="partly-cloudy-day" data-v-0f3d927f=""> </div> </div> <div class="kpi summary" data-v-0f3d927f=""> <div class="subtitle"> Max </div> <div> 28℃ </div> <div class="normals"> <div> 22 </div> <div> 27 </div> <div> 36 </div> <div class="subtitle"> Min </div> <div class="subtitle"> Mean </div> <div class="subtitle"> Max </div> </div> </div> <div class="kpi summary" data-v-0f3d927f=""> <div class="subtitle"> Min </div> <div> 13℃ </div> <div class="normals"> <div> 9.9 </div> <div> 15 </div> <div> 19 </div> <div class="subtitle"> Min </div> <div class="subtitle"> Mean </div> <div class="subtitle"> Max </div> </div> </div> <div class="kpi summary" data-v-0f3d927f=""> <div class="subtitle"> Rain </div> <div> 0mm </div> <div class="normals"> <div> 0 </div> <div> 4.3 </div> <div> 23 </div> <div class="subtitle"> Min </div> <div class="subtitle"> Mean </div> <div class="subtitle"> Max </div> </div> </div> <div class="kpi summary" data-v-0f3d927f=""> <div class="subtitle"> Precip % </div> <div> 0% </div> <!-- --> </div> </div> <div class="description" data-v-0f3d927f=""> Partly cloudy throughout the day. </div> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> </div>'
soup = BeautifulSoup(html, 'html.parser')
```
接下来,我们可以用 `find_all` 函数来查找所有的日期标签,然后依次提取出这三天的天气信息。代码如下:
```python
# 查找所有日期标签
dates = soup.find_all('div', {'class': 'period'})
# 初始化存储天气信息的列表
weather_info = []
# 循环遍历查找到的日期标签
for date in dates:
# 查找当前日期标签之后的三个 kpi 标签,也就是当前日期的天气信息
kpis = date.find_next_siblings('div', {'class': 'kpi'})
# 初始化存储当前日期天气信息的字典
info = {'date': date.text.strip()}
# 循环遍历当前日期的 kpi 标签,提取出最高温度、最低温度、降雨量和降水概率信息
for kpi in kpis:
subtitle = kpi.find('div', {'class': 'subtitle'}).text.strip()
value = kpi.find('div', {'class': None}).text.strip()
info[subtitle] = value
# 将当前日期的天气信息添加到列表中
weather_info.append(info)
```
最后,我们可以打印出提取出来的天气信息。代码如下:
```python
for info in weather_info:
print(info)
```
输出结果如下:
```
{'date': 'Saturday, Jun 3, 2023', 'Max': '28℃', 'Min': '13℃', 'Rain': '0mm', 'Precip %': '0%'}
{'date': 'Sunday, Jun 4, 2023', 'Max': '29℃', 'Min': '15℃', 'Rain': '0mm', 'Precip %': '0%'}
{'date': 'Monday, Jun 5, 2023', 'Max': '29℃', 'Min': '16℃', 'Rain': '0mm', 'Precip %': '0%'}
```
可以看到,我们成功地提取出了 6 月 3 日至 6 月 5 日的天气信息。
相关推荐
![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)
![](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)
<html> <head> <meta charset="utf-8" /> <title>星星国际影城</title> <script src="js/main.js" type="text/javascript"></script> </head> <body> 登录| 注册| 全国服务热线:888-8888888 < img src="images/logo.jpg" title="" alt="logo" /> 首页 影片 影城 购票 影城活动 会员服务 顾客互动 <input type="text" placeholder="搜索影片" name="search"/> <input type="button" name="btn" value="" /> < img src="images/b1.png" /> < img src="images/b2.png" /> < img src="images/b3.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)