首页 > 解决方案 > 所以我试图在一个数组中获取我的 axios 响应,但我不知道该怎么做

问题描述

所以我试图将我的 axios 响应从 spring boot 页面获取到 vuejs 数组中,我不知道为什么,但显然我不能在这里使用 split。我对 vue.js 很陌生,所以请放轻松。

Vue.js 代码:

// JavaScript source code

new Vue({
    el: '#app',
    data() {
        return {
            urls: [],
            url: ""
        }
    },
    mounted() {
        axios
            .get("http://localhost:91/all/URL")
            .then(response => (this.url = response.data, this.urls = this.url.split(",")))
    }
})

HTML:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <meta charset="utf-8" />
    <title>Home</title>
</head>
<body>
    <div id="app">
        <ul v-for="url in urls">
            <li> {{ url }} </li>
        </ul>
    </div>
    <script src="Script.js"></script>
</body>
</html>

控制台抛出以下错误:

Script.js:14 Uncaught (in promise) TypeError: this.urlfound.split is not a function
    at Script.js:14

标签: javascriptvue.js

解决方案


变量名称之间存在冲突,在模板中您有来自 v-for 的 url,并且在数据中定义了相同的 url。


推荐阅读