个人中心
gpt4 book ai didi

javascript - 合并从 API vue.js 获得的数据的问题

转载 作者：行者123 更新时间：2023-12-03 06:47:26 24 4
gpt4 key购买 nike

在附加了字符串输入的 API 调用之后，我得到了结果。我遇到的问题是将它合并到我的前端。我已经尝试了很多我在网上找到的解决方案，但没有任何效果并且无法理解。到目前为止，我已经这样做了:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = text/javascript src = https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<form action="http://127.0.0.1:1880/" target="_self">
    <label for="request"><strong>Please insert the input here:</strong></label><br>
    <input type="text" id="request" name="input"><br>
    <button v-on:click="getOverview($event)">Submit</button>
</form>
<h1 id="results" v-for="overview in overview">
    {{overview}}
</h1>
<script type = text/javascript >
    new Vue({
        el: "#results",
        data() {
            return {
                overview: []
            }

        },
        methods: {
            async getOverview(event) {
                try {
                    const {data:{json:{sub_regions}}} = await axios.get('http://127.0.0.1:1880/');
                    console.log('results data', sub_regions);
                    this.overview = sub_regions;
                }
                catch (error) {
                    console.log(error);
                    return [];
                }
            }
        },
        created(){
            this.getOverview()
        }
    })
</script>
</body>
</html>
我对javascript有点迷茫，因为我是新手，欢迎各种帮助，
先感谢您! :)
编辑:我从 API 获得的文件是 JSON

最佳答案

看起来好像您正在尝试调用 vue 应用程序本身之外的方法。
您有 el: "results"但是您试图在其上下文之外的按钮中调用 vue 方法。
尝试这样的事情:

<div id="results">
  <form action="http://127.0.0.1:1880/" target="_self">
      <label for="request"><strong>Please insert the input here:</strong></label><br>
      <input type="text" id="request" name="input"><br>
      <button v-on:click="getOverview($event)">Submit</button>
  </form>
  <h1 v-for="overview in overview">
      {{overview}}
  </h1>
</div>

关于javascript - 合并从 API vue.js 获得的数据的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63261174/

24 4 0
文章推荐： laravel - 我们可以直接在 vuejs 中绑定(bind)值吗，比如 v-bind :value ="' India' "
文章推荐： graphcool - 仅允许用户在 Graphcool 权限中编辑自己的内容
文章推荐： RabbitMQ 死信交换从未收到消息
文章推荐： javascript - 突出显示 Vue.js 中新插入的行
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com