[VUE WARN]：呈现时出错：“TypeError：无法读取未定义的REST API的属性‘wp：FeaturedMedia’

我使用这段代码学习vuejs，并使用WordPress REST API制作一个公文包无限滚动。我可以呈现前十篇文章，但在滚动时，vue将停止工作，并出现与api提供的特色图像url相关的错误：

[Vue warn]：呈现错误：“TypeError：无法读取未定义的属性“wp:featuredmedia”（在根目录中找到）

引用错误的代码行是self.posts.push(data);

TypeError：无法读取未定义的属性“wp:featuredmedia”

这一行表示另一个错误：

$.getJSON( \'wp-json/wp/v2/posts?categories=3&page=\'+page+\'&per_page=10&_embed\', function(data){}

代码如下：

<?php get_header(); ?>

<div class="container" id="app">
  <div class="row" style="padding:2em;margin:2em 0 0 0;" v-on:scroll="loadItems()">
    <div class="card-columns">
      <div class="card" v-for="post in posts">
        <img class="card-img-top" v-bind:src="post._embedded[\'wp:featuredmedia\'][0].source_url" />
        <h4 class="" v-html="post.title.rendered"></h4>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
(function($){
  $(document).ready(function(){

  var page = 1;
  var canBeLoaded = true;
  var app = new Vue({
    el: \'#app\',
    data: {
      posts: []
    },
    created: function() {
      window.addEventListener(\'scroll\',this.loadItems);
    },
    destroyed: function() {
      window.removeEventListener(\'scroll\', this.loadItems);
    },
    mounted: function(){
      console.log(\'mounted fired\');
      var self = this;
      $.getJSON( \'wp-json/wp/v2/posts?categories=3&page=1&per_page=10&_embed\', function(data){
        console.log(data);
        self.posts = data;
      });
    },
    methods: {
      loadItems: function(){
        var bottomOffset = 2000;
        var self = this;
          if( $(document).scrollTop() >= ( $(document).height() - $(window).height() - 10 ) && canBeLoaded == true ){
            console.log(\'loadItems method fired\');
            console.log(page);
            canBeLoaded = false;
            $.getJSON( \'wp-json/wp/v2/posts?categories=3&page=\'+page+\'&per_page=10&_embed\', function(data){
              if( data.length > 0 ){
                self.posts.push(data);
                page++;
              }
            }).done(function(){
              canBeLoaded = true;
            });
          }
      }, // end loadItems
    } // end methods
  });

  // for debug and prototype only - remove in production

  // var root = $(\'html, body\');
  //   $(\'#scroll-link\').on(\'click\', function(e){
  //     e.preventDefault();
  //       root.animate({
  //           scrollTop: $( $.attr(this, \'href\') ).offset().top
  //       }, 500);
  //       return false;
  //   });
  //

  }); // doc ready
}(jQuery));
</script>

我确信图像已返回，但为什么会出现此错误？

主题定制--当使用php变量时，如何在外部存储javascript？

EDIT: Complete re-write在过去的几周里，我一直在为我的主题开发一个自定义扩展。这是我第一次用Wordpress“开发”。所有的工作都很好，我对结果的功能很满意，尽管它需要一些整理。我希望将我的js函数移到一个外部文件-自定义。js。原始格式：main-block.php$custom1 = $custom_meta[\'custom1\']; <form name=\"customForm\"> Validatio

相关推荐

主题定制--当使用php变量时，如何在外部存储javascript？