Unset img sr c, если URL не указан vue. js

Question

Я изучаю vue. js Я проверяю, как это работает с ajax и wp rest api, я создаю собственную тему панели и хочу показать содержимое справа экрана в прокручиваемой панели и страниц на левой стороне. экран без возможности прокрутки. Я могу отображать содержимое постов и страниц, я также получаю показанное изображение и помещаю его в тег <img>. Мне нужно понять, как сказать vue. js, что если отсутствуют какие-либо URL-данные для показа выбранного изображения, sr c элемента изображения необходимо сбросить. Это возможно ?

<?php get_header(); ?>

<div class="container-fluid content-wrapper" style="overflow:hidden;height:100vh;">
  <div class="row" id="app" style="margin:2em 0 2em 0;">
<!-- Sidebar Top Area -->
    <div class="col-sm-12 col-md-4 col-lg-4" id="navPanel" style="padding:2em;">
<?php $links = new WP_Query( array('post_type' => 'page', 'posts_per_page' => -1) ); ?>
<?php if( $links->have_posts() ): while( $links->have_posts() ): $links->the_post(); ?>
      <h1 class="home-claim" style="font-size:2em;">
        <a class="" href="#" v-on:click.prevent="getContent(<?php echo get_the_ID(); ?>)" ><?php the_title(); ?></a>
      </h1>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>
    </div>
<!-- Post/Pages Content -->
    <div class="col-sm-12 col-md-8 col-lg-8" id="contentPanel" style="padding:0 0 2em 0;overflow:auto;height:100vh;">
<!-- Image here -->
      <img class="img-fluid w-100" v-if="featuredImage" v-bind:src="featuredImage" />
      <div class="" id="" v-html="content"></div>

    </div>
<!-- Sidebar Bottom Area -->
  </div>
</div>

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

  var app = new Vue({
    el: '#app',
    data: {
      content: null,
      featuredImage: null,
    },
    mounted: function(){

    },
    methods: {
      getContent: function(id){
        console.log('method Fired!');
        var self = this;
        console.log(id);
        var url = 'wp-json/wp/v2/pages/'+id+'?_embed';
        $.getJSON( url, function(data){
          console.log(data);
          self.content = data.content.rendered;
          self.featuredImage = data._embedded["wp:featuredmedia"][0].source_url;
          //console.log(data._embedded["wp:featuredmedia"][0].source_url);
          //console.log(data.content.rendered);
        });
      }

    }
  });

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

<?php get_footer(); ?>

Я также заметил, что только для моей страницы wp api вернет код 401 для избранного изображения. Любая помощь будет оценена.

Answer 1

Сбросьте FeaturedImage перед загрузкой:

(function($){
  $(document).ready(function(){
    var app = new Vue({
      methods: {
        getContent: function(id){
          var self = this;

          // unset the image before you are loading.
          // this way it will also unset when the loading fails.
          self.featuredImage = null;

          var url = 'wp-json/wp/v2/pages/'+id+'?_embed';
          $.getJSON( url, function(data){
            self.featuredImage = data._embedded["wp:featuredmedia"][0].source_url;
          });
        }
      }
    });
  });
}(jQuery));