Vue.js遍历Drupal API返回电影标题无显示，疑存在语法问题

我看了你的代码和环境描述，发现几个关键问题导致页面没有渲染内容，下面一步步给你梳理并修正：

问题排查与分析 #

• 1. 未初始化响应式数据：你的data对象里没有声明movies数组，Vue无法追踪这个属性的变化，即便后续用$set赋值，也可能出现响应不及时的情况。
• 2. 生命周期钩子已废弃：ready是Vue 1.x的生命周期钩子，Vue 2.x里已经改用mounted，用ready不会触发你的getMovies方法。
• 3. 回调函数的this指向错误：在this.$http.get的普通函数回调里，this不再指向Vue实例，导致this.$set无法正确设置数据。
• 4. 响应数据结构可能未正确获取：部分Vue-resource版本中，get请求的回调参数是完整响应对象，需要通过response.body才能拿到接口返回的JSON数据。

修正后的app.js代码 #

const apiURL = "http://moviesapi/api/movies";
new Vue({
  el: '#app',
  data: {
    movies: [] // 初始化movies数组，确保Vue能追踪其变化
  },
  mounted: function(){ // 替换废弃的ready为mounted钩子
    this.getMovies();
  },
  methods: {
    getMovies: function(){
      // 用箭头函数保证this指向Vue实例，避免上下文丢失
      this.$http.get(apiURL)
        .then(response => {
          // 从响应对象中取出实际的电影数据
          this.movies = response.body;
        })
        .catch(error => {
          // 增加错误处理，方便排查接口请求问题
          console.error('获取电影数据失败:', error);
        });
    }
  }
})

补充说明 #

• 如果你习惯用普通函数回调，可以提前保存Vue实例的引用：

  getMovies: function(){
    const vm = this;
    this.$http.get(apiURL, function(movies){
      vm.movies = movies;
    });
  }
  

• 你的模板代码{{ movie.title[0].value }}是正确的，因为接口返回的title字段确实是数组嵌套对象的结构，不需要修改。
• 确认你的Vue版本和Vue-resource版本匹配，Vue 2.x需要搭配Vue-resource 1.x及以上版本。

内容的提问来源于stack exchange，提问作者paul cappucci