mounted() { Ajax(`/tui/commission`, { id: 222 }).then(res => { console.log(res); }); }
时间: 2024-05-20 16:19:14 浏览: 36
这段代码是一个 Vue.js 的生命周期钩子函数 `mounted()`,在组件挂载后执行。它使用了一个 Ajax 请求,请求地址是 `/tui/commission`,请求参数是 `{id:222}`。请求成功后将返回的数据打印在控制台上。
根据代码中的 `Ajax` 方法来看,它应该是一个自定义的封装了原生 XMLHttpRequest 对象的异步请求函数。它会使用 Promise 对象封装请求过程,当请求成功或失败时会分别调用 `resolve` 或 `reject` 函数。在这个 `mounted()` 钩子函数中,我们使用 `then()` 方法来处理请求成功后的逻辑,即打印返回的数据。
相关问题
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属性。
<script> const app=new Vue({ el:"#work", data() { return { imageUrl: [], } }, methods: { getImage() { // 从后台获取图片地址 axios.get('http://localhost:9091/User/findByPage/1').then(response => { console.log(response.data) this.imageUrl = response.data.map(item=>{ console.log(item) // console.log(item.speciesCName) // return{ // value:item.speciesCName, // label:item.speciesCName, // } }) }) }, mounted() { this.getImage(); console.log("dong") }, }, }) </script>我这个钩子函数怎么没作用
从你提供的代码来看,可能是以下几个原因导致钩子函数没有起作用:
1. 没有将Vue.js的库引入到HTML文件中。在使用Vue.js时,需要先将其库引入HTML文件中,可以通过CDN方式或者下载到本地使用。
2. Vue实例的el属性没有绑定到正确的DOM元素上。在这个例子中,你的Vue实例的el属性被绑定到了一个id为work的DOM元素上,但是可能不存在或者HTML文件中没有定义。你需要确保el属性被绑定到正确的DOM元素上。
3. axios库没有被正确引入。在使用axios发送HTTP请求时,需要先将其库引入到HTML文件中,否则会抛出未定义的错误。
4. `console.log(response.data)`语句可能会导致程序出错。当后端返回的数据不是json格式,或者返回内容为空时,这行代码可能会导致程序出错,从而导致后面的代码无法执行。你可以先注释掉这行代码,看看是否能获取到数据。
希望这些提示能够帮助你找到问题所在。如果还有其他问题,可以再提出来,我会尽力帮你解决。