使用Axios从JSON获取数据

时间:2018-04-14 16:09:39

标签: json axios

我的localhost:8080 / omdb显示:

enter image description here

我希望从中获得标题,年份和imdbID。

这是我的代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
    <title>Web Project 2018</title>
    <link rel="stylesheet" href="">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

<div id="searchResult">
    <h2>List of movies</h2>
    <table>
        <tr>
            <td><b>Title</b></td>
            <td><b>Year</b></td>
            <td><b>imdbID</b></td>
        </tr>
        <tr v-for="film in films">
            <td>{{ film.Title }}</td>
            <td>{{ film.Year }}</td>
            <td>{{ film.imdbID }}</td>
        </tr>
    </table>
</div>

<script>
    new Vue({
        el: '#searchResult',
        data: {
            films: [],
            errors: [],
        },
        created() {
                axios.get('http://localhost:8080/omdb')
                        .then(response => {
                            this.films = response.data;
                        })
                        .catch(error => {
                            this.errors.push(error);
                        });
        }
    });

</script>
</body>
</html>

并且视图只显示以下内容:

enter image description here

为什么我无法获得价值观的任何想法?

由于

0 个答案:

没有答案