ArcGis API for js 在vue.js中的使用

Posted 2023-03-22

参考技术A

最近换了一份工作，公司做的是gis相关的服务，之前完全没有接触过gis，光是把地图展现到页面上就费了好些功夫。所以打算把自己在项目中用到的相关技术点记录下来，供自己日后翻看。有写的不好的地方，还请在评论留言。

在vue中使用arcgis需要一个叫做 esri-loader 的东西来帮我们加载arcgis文件。

npm上的相关文档参考： https://www.npmjs.com/package/esri-loader

样式文件可以在main.js中引入，也可以在当前组件引入，我选择的是在main.js中引

如果控制台可以打印出Map对象，那么说明我们已经在vue中成功加载arcgis了

Vue.js - v-for 不渲染 api 调用响应数据

【中文标题】Vue.js - v-for 不渲染 api 调用响应数据

【英文标题】：Vue.js - v-for not rendering api call response data

【发布时间】：2020-12-01 11:53:28

【问题描述】：

我正在尝试呈现数据列表，但似乎每当页面加载时它都不想显示数据。我的 api 调用工作并获取我需要的所有内容并将其设置为我的数据对象。这里的代码： blogPosts 设置为对象数组。

<template>
<div>
    <div class="bw-blog-card" v-for="post in blogPosts" :key="post.id">
        <div class="bw-blog-card__profile"></div>
        <div class="bw-top-blog__top-card">
            <div>
            creator:  post.username 
            </div>
            <div>
                 post.created_at 
            </div>
            <div class="bw-blog-card__card-title">
                 post.title 
            </div>
            <div>
                 post.description 
            </div>
        </div>
    </div>
</div>

</template>

<script>
module.exports = 
    data: () => 
        return 
            blogPosts: []
        
    ,
    methods: 
        getBlogPosts: async () => 
            try 
                let  data  = await axios.get(`/devblog`)
                this.blogPosts = data.data
                console.log(this.blogPosts)
            
            catch (error) 
                console.error(error)
            
        
    ,
    created() 
        this.getBlogPosts();
    

</script>

现在，如果我将blogPosts 硬编码为对象数组，这将完全正常。我可以了解为什么它不能通过 api 调用工作吗？

【问题讨论】：

console.log(this.blogPosts) 显示了什么？

这显示 blogPosts 设置为对象数组

我看不出它有什么不工作的原因。你能发布对象数组吗？

【参考方案1】：

尝试将getBlogPosts: async () => 更改为async getBlogPosts() ，它应该可以工作：

Vue.config.devtools = false;
Vue.config.productionTip = false;

let app = new Vue(

  el: '#app',

  data() 
    return 
      blogPosts: []
    
  ,
  methods: 
    async getBlogPosts() 
      try 
        let 
          data
         = await axios.get(`https://jsonplaceholder.typicode.com/posts`)
        this.blogPosts = data
        console.log(this.blogPosts)
       catch (error) 
        console.error(error)
      
    
  ,
  created() 
    this.getBlogPosts();
  

)

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
  <div class="bw-blog-card" v-for="post in blogPosts" :key="post.id">
    <div class="bw-blog-card__profile"></div>
    <div class="bw-top-blog__top-card">
      <div>
        creator:  post.userId 
      </div>

      <div class="bw-blog-card__card-title">
         post.title 
      </div>
      <hr/>
    </div>
  </div>
</div>

【讨论】：

谢谢先生。现在更有意义了