VueJs 方法语法

Question

我正在尝试通过电影标题创建循环但没有显示任何内容，我想我可能有语法问题。查看我的 VueJs 应用程序时，我可以在控制台中看到对象数组。我在 Drupal 中创建了一个视图，它以 Json 格式输出。应用程序控制台没有显示任何错误，它可以访问我的视图。我在本地主机上。我的 Vue app.js 文件如下所示：

apiURL = "http://moviesapi/api/movies"

new Vue({
    el: '#app',

    data: {

    },

    ready: function(){
        this.getMovies();
    },

    methods: {
        getMovies: function(){

            this.$http.get(apiURL, function(movies){
                this.$set('movies', movies);

            });
        }
    }
})

我的 index.html 看起来像这样：

<div class="container" id="app">
<div v-for="movie in movies">
   <h4>{{ movie.title[0].value }}</h4>
</div>
</div>

这是我的本地主机上http://moviesapi/api/movies 的 json 输出的一部分：

[

{
    "nid": [
        {
            "value": 2
        }
    ],
    "uuid": [
        {
            "value": "5a4c3948-4828-476f-968e-d4c754641c36"
        }
    ],
    "vid": [
        {
            "value": 2
        }
    ],
    "langcode": [
        {
            "value": "en"
        }
    ],
    "type": [
        {
            "target_id": "movies",
            "target_type": "node_type",
            "target_uuid": "2a459370-903b-4376-a2c9-0dfb93d21dd8"
        }
    ],
    "revision_timestamp": [
        {
            "value": "2018-05-10T19:42:25+00:00",
            "format": "Y-m-d\\TH:i:sP"
        }
    ],
    "revision_uid": [
        {
            "target_id": 1,
            "target_type": "user",
            "target_uuid": "8fe68b9e-aef6-46eb-be60-5d31651de666",
            "url": "/user/1"
        }
    ],
    "revision_log": [ ],
    "status": [
        {
            "value": true
        }
    ],
    "title": [
        {
            "value": "Star Wars"
        }
    ],

Answer 1

• ready 挂钩适用于 Vue 1。在版本 2 中，您需要使用 created 或 mounted。
• 您应该在数据对象中预先声明movies，而不是使用this.$set。
• 你在使用 vue 资源吗？我认为您的this.$http.get 电话可能不正确；我认为它不接受回调，它返回一个 Promise。此外，该函数未绑定到 this，这可能是个问题（请改用箭头函数语法）。

针对 Vue 2 修改：

new Vue({
    el: '#app',

    data: {
        movies: [],
    },

    mounted() {
        this.getMovies();
    },

    methods: {
        getMovies() {
            this.$http.get(apiURL).then(res => {
                this.movies = res.data;
            });
        }
    }
})

否则，如果您使用的是 Vue 1，那么请保持 ready 原样。