0

I am trying to create loop through movie titles But nothing is displayed, I think I may have a syntax issue. I can see the object array in the console when viewing my VueJs App. I created a View in Drupal and it outputs in Json format. The App console shows no errors and it can access my view. I am on a localhost. My Vue app.js file looks like this:

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);

            });
        }
    }
})

My index.html looks like this:

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

This is part of the json output at http://moviesapi/api/movies, on my localhost:

[

{
    "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"
        }
    ],
paul cappucci
  • 243
  • 1
  • 12
  • Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) – Aluan Haddad May 11 '18 at 13:04

1 Answers1

0
  • The ready hook is for Vue 1. In version 2 you need to use either created or mounted.
  • Instead of using this.$set, you should declare movies upfront in the data object.
  • Are you using vue-resource? I think your this.$http.get call may be incorrect; I don't think it accepts a callback, it returns a Promise. Also the function is not bound to this which may be a problem (use arrow function syntax instead).

Modified for Vue 2:

new Vue({
    el: '#app',

    data: {
        movies: [],
    },

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

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

Otherwise if you're using Vue 1 then just keep ready as-is.

Decade Moon
  • 32,968
  • 8
  • 81
  • 101
  • Yes I am using vue-resource v1.5.0. And Vue.js v1.0.11. I am following this tutorial http://watch-learn.com/series/one-page-app-with-drupal-8-and-vuejs Step # 2. I made the changes you have but its still doesnt display. Should I uprade vue-resource v1.5.0 and Vue.js v1.0.11 – paul cappucci May 11 '18 at 13:32
  • I updated to Vue.js v2.5.17-beta.0. Made your changes. Now I get this error. TypeError: movie.title is undefined. My html output is this {{ movie.title[0].value }} – paul cappucci May 11 '18 at 13:46
  • My div looks like this.

    {{ movie.title[0].value }}

    .     – paul cappucci May 11 '18 at 13:49
  • 1
    You shouldn't be using Vue 1 unless you have a reason to (such as working with a legacy codebase). If you're just learning Vue, then you should learn the latest version. **That tutorial is way out of date.** As for "movie.title is undefined", do you have any movies without a title? Confirm that every movie in the array has a title. – Decade Moon May 11 '18 at 13:53
  • Upgrade to the latest version of `vue-resource` too. I made a change to my answer. – Decade Moon May 11 '18 at 13:54
  • Thank you Decade Moon! It works. Is res a function inside vue-resource.min.js here https://github.com/pagekit/vue-resource/blob/develop/dist/vue-resource.min.js – paul cappucci May 11 '18 at 15:18
  • Is this the best place to post questions for VueJS, React and Angular? – paul cappucci May 11 '18 at 15:35