vue2 mounted挂载同一个接口同一个页面上,传不同的参数
时间: 2023-10-19 14:17:26 浏览: 90
在 Vue2 中,您可以使用 `watch` 监听参数的变化,并在变化时重新调用接口获取不同的数据。具体实现方法如下:
1. 在 `data` 中定义需要传递的参数,比如 `paramA` 和 `paramB`:
```javascript
data() {
return {
paramA: 'valueA',
paramB: 'valueB',
data: null
}
}
```
2. 在 `watch` 中监听参数的变化,并重新调用接口:
```javascript
watch: {
paramA: function() {
this.fetchData()
},
paramB: function() {
this.fetchData()
}
}
```
3. 在 `mounted` 中调用接口获取数据:
```javascript
mounted() {
this.fetchData()
},
methods: {
fetchData() {
const url = 'your-api-url'
const params = {
paramA: this.paramA,
paramB: this.paramB
}
axios.get(url, { params })
.then(response => {
this.data = response.data
})
.catch(error => {
console.error(error)
})
}
}
```
在上面的代码中,我们定义了 `paramA` 和 `paramB` 两个参数,并在 `watch` 中监听它们的变化。当参数发生变化时,会调用 `fetchData` 方法重新获取数据。在 `fetchData` 方法中,我们使用 `axios` 发送 GET 请求,并将参数传递给后端。当后端返回数据时,我们将其保存在 `data` 中,以便在页面上展示。
阅读全文