方法中的导入和调用函数不起作用答案

【问题标题】：import and call function within Method not working方法中的导入和调用函数不起作用
【发布时间】：2021-05-10 19:44:46
【问题描述】：

我正在创建一个小型 VueJs 应用，它调用 NASA 图像 API 并显示在屏幕上。

在 Header 组件中（下图）我有一个搜索栏，点击它会调用另一个文件中定义的 Axios 方法，我从文档中了解到，如果将函数导入组件，那么它们需要在 'methods 中定义'。但是，当我点击搜索时，控制台上什么也没有显示？

注意：对 NASA 的调用已经过测试，并且当我包含在组件中时它确实有效。我想这引出了一个问题，如果我应该将它留在组件中，因为我不会在其他地方使用它。

但仍想了解问题背后的逻辑。

组件代码：

<template>
  <div>
    <h1>Nasa Image Search</h1>

    <div class="search-container">
      <form action="/action_page.php">
        <input type="text" placeholder="Search.." name="search" />
        <button v-on:click="search" type="submit">Search</button>
      </form>
    </div>
  </div>
</template>

<script>
import nasa from '../apiCall'

export default {
  name: 'Header',
  methods: {
    search : function(){
      nasa
    }
  }
}
</script>

axios函数调用：

import axios from 'axios'

const nasa = () => {
  var url = `https://images-api.nasa.gov/search?q=apollo-13&media_type=image`
  console.log(url) //bug testing

  axios
    .get(url)
    .then(function(response) {
      // handle success
      console.log(response)
    })
    .catch(function(error) {
      // handle error
      console.error(error)
    })
}

export default { nasa }

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

您的默认导出实际上是一个具有函数属性的对象，如下所示：

{
  nasa: () => { ... }
}

当您导入对象时，您将其命名为 nasa，因此您实际上必须像这样调用函数：

nasa.nasa()

由于您可能只打算导出函数，请保持导入不变，但将导出更改为：

export default nasa;  // no brackets

并且在你的组件中，你不需要将它嵌入到方法中，你可以直接将它设置为search方法：

methods: {
  search: nasa
}

【讨论】：