小编Ben*_*Ben的帖子

Hi Unsplash 允许通过以下方式从其网站加载随机图像：

https://source.unsplash.com/random/2560x1440

如果每次 url 生成随机静态图像时我都从浏览器访问 url，例如：

https://images.unsplash.com/photo-1488616268114-d949a6d72edf?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2560&h=1440&fit=crop&s=a7f66c8417bcf79d2503b84db64c7b1a

我想通过第一个网址请求 jquery 或 js 中的图像，并作为响应获取第二个网址。这可能吗？

在这种情况下如何从另一个组件调用该方法？我想在组件 1 到组件 2 中单击按钮后从 API 加载额外的数据。

谢谢

这是我在单独文件中的两个组件：

压缩按钮.vue

<template>
    <div>
        <a href v-on:click="buttonClicked">Change Name</a>
    </div>
</template>

<script>
    export default {
        name: 'compbutton',
        methods: {
            buttonClicked: function () {
                //call changeName here
            }
        }
    }
</script>

compname.vue

<template>
    <div>{{name}}</div>
</template>

<script>
    export default {
        name: 'compname',
        data: function () {
            return {
                name: 'John'
            }
        },
        methods: {
            changeName: function () {
                this.name = 'Ben'
            }
        }
    }
</script>

我的数据获取在全局使用时工作正常，但是一旦我坚持使用单个文件组件就不会返回项目。我做错了什么？

ladeditems.vue

<template>
<div>
  <ul v-for="item in items">
    <li>
      {{item.title}}
    </li>
  </ul>
</div>
</template>

<script>
export default {
  components: {'tiny-slider': VueTinySlider},
  name: 'ladeditems',
  data: {
    items: null
  },
  methods: {
    fetchData: function () {
      let self = this
      const myRequest = new Request('https://jsonplaceholder.typicode.com/posts')

      fetch(myRequest)
        .then((response) => { return response.json() })
        .then((data) => {
          self.items = data
          // console.log(self.items)
        }).catch( error => { console.log(error); });
    }
  },

  mounted() {
    this.fetchData()
  }
}
</script>