onBeforeRouteUpdate((to) => { console.log(to.query.id); axios.get(`/hws/square/basic/facade?squareId=${to.query.id}`).then(res => { console.log(res.data.result); list.splice(0) list.push(res.data.result) }) }); 改成watch监听的写法
时间: 2024-03-23 20:41:20 浏览: 20
你可以这样改写:
```javascript
watch: {
'$route.query.id': {
immediate: true,
handler(id) {
axios.get(`/hws/square/basic/facade?squareId=${id}`).then(res => {
this.list.splice(0);
this.list.push(res.data.result);
});
}
}
}
```
这样,`$route.query.id` 的变化会触发 `handler` 方法,从而发送请求并更新 `list` 数组。`immediate` 选项表示在组件创建时立即执行一次 `handler` 方法,以便初始化数据。
相关问题
onBeforeRouteUpdate((to) => { console.log(to.query.id); axios.get(/hws/square/basic/facade?squareId=${to.query.id}).then(res => { console.log(res.data.result); list.splice(0) list.push(res.data.result) }) }); 改成vue3中watch监听的写法
在Vue 3中,我们可以使用`watchEffect`或`watch`函数来监听路由变化。这里是使用`watch`函数的示例代码:
```javascript
import { watch } from 'vue'
export default {
setup() {
const list = reactive([])
watch(
() => $route.query.id,
(id) => {
axios.get(`/hws/square/basic/facade?squareId=${id}`).then(res => {
list.splice(0)
list.push(res.data.result)
})
},
{ immediate: true }
)
return {
list
}
}
}
```
在`setup`函数中,我们使用`watch`函数来监听`$route.query.id`的变化。`$route`是Vue Router提供的一个全局变量,用于访问当前路由信息。当`$route.query.id`发生变化时,`watch`函数的回调函数会被触发,我们在回调函数中发送请求并更新`list`数组。`immediate`选项表示在组件创建时立即执行一次回调函数,以便初始化数据。
需要注意的是,使用`watch`函数需要导入Vue的`watch`函数。同时,在Vue 3中,我们还需要导入`reactive`函数来创建响应式数据对象。
const app=new Vue({ el:"#app", data:{ images:[], }, methods: { getImage() { // 从后台获取图片地址 axios.get("http://localhost:9091/User/findByPage/1").then(response=> { console.log(response.data); this.images = response.data.map(item=>{ console.log(item); }); // .map(item=>{ // console.log(item) // console.log(item.speciesCName) // return{ // value:item.speciesCName, // label:item.speciesCName, // } }) // axios.get("http://localhost:9091/User/findByPage/1").then(function (response){ // console.log(response.data); // }).catch(function (error){ // console.log(error) // }) }, mounted() { this.getImage(); }, }, })不起作用
根据您提供的代码,我发现您在获取到后端返回的图片地址后,没有将其赋值给Vue实例的data属性中的images属性,而是在map函数中打印数据,导致images属性没有被更新。您可以尝试修改代码如下:
```
const app = new Vue({
el: "#app",
data: {
images: []
},
methods: {
getImage() {
// 从后台获取图片地址
axios.get("http://localhost:9091/User/findByPage/1").then(response => {
console.log(response.data);
this.images = response.data.map(item => {
console.log(item);
return item.imageUrl; // 将图片地址返回
});
});
}
},
mounted() {
this.getImage();
}
});
```
在上面的代码中,我们将后端返回的图片地址存储在Vue实例的data属性中的images属性中,并在模板中使用v-for指令遍历images属性来展示图片。请注意,我们在map函数中使用return语句将图片地址返回给images属性。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](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)