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(); }, }, })不起作用
时间: 2024-02-10 20:15:44 浏览: 47
根据您提供的代码,我发现您在获取到后端返回的图片地址后,没有将其赋值给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属性。
相关问题
const app = new Vue({
This is the beginning of a Vue.js application. Vue is a JavaScript framework for building user interfaces and single-page applications. The code you provided initializes a new Vue instance and assigns it to a constant variable named `app`.
Here's an example of how you might use this code to create a basic Vue app:
```
<!DOCTYPE html>
<html>
<head>
<title>My Vue App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello, world!'
}
})
</script>
</body>
</html>
```
In this example, the Vue instance is mounted to the `#app` element in the HTML document, and the `data` property defines a `message` variable that is displayed using the Vue directive `{{}}`. When the app is loaded in the browser, it will display the text "Hello, world!" on the page.
import Vue from 'vue' import App from './App' Vue.config.productionTip = false // prod // Vue.prototype.serverUrl="https://felix.picp.vip/wx" // dev Vue.prototype.serverUrl="http://localhost:8899/wx" App.mpType = 'app' const app = new Vue({ ...App }) app.$mount()
这是一个使用了 Vue.js 框架的小程序入口文件。首先引入了 Vue 和 App 组件,然后设置了 Vue 的一些配置,如关闭生产提示。接着通过 Vue.prototype 添加了一个名为 serverUrl 的全局变量,其值为业务服务器的地址。最后,将 App 组件挂载到 Vue 实例上,并通过 $mount() 方法将其渲染到页面上。