I’ve a customized widget the place the consumer can insert an username in an <enter> discipline. It is working wonderful, however I have to get the insetred worth from php and go it to the javascript file that’s enqueued with my widget plugin. I am testing with wp_localize_script but it surely is not going to work and I am unable to entry the handed information if i do console.log. How I can repair this, is feasible to entry information from php to plugin js file?

class InstagramFeedWidget extends WP_Widget {

  public $url;

  public perform __construct()
  {
    dad or mum::__construct(
      'instagram-widget',
      'Instagram feed',
      array(
        'description' => ''
      )
    );
    add_action( 'widgets_init', array($this, 'init') );
    add_action( 'wp_enqueue_scripts', array($this, 'initScripts' ) );
  }

  public perform init()
  {
    register_sidebar(
      array(
        'identify'        =>  'Instagram feed',
        'id'          =>  'ig-feed',
        'description' =>  'Instagram feed widget',
      )
    );
    register_widget( 'InstagramFeedWidget' );
  }

  public perform widget( $args, $occasion )
  {
    $this->url = 'https://instagram.com/'.$occasion['username'].'?__a=1';


    // $ch = curl_init();
    // curl_setopt( $ch, CURLOPT_URL, $url );
    // curl_setopt( $ch, CURLOPT_HTTPHEADER, array('Settle for: software/json') );
    // curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );
    // curl_setopt( $ch, CURLOPT_FOLLOWLOCATION, true );
    // $feed = curl_exec($ch);
    // curl_close($ch);
    // $information = json_decode( $feed , true);
    // ob_start();
    ?>
    <!-- <div class="jumbotron jumbotron-fluid ig-feed">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 col-md-12 col-lg-12"> -->
            <div class="swiper-container swiper-feed" id="ig-feed">
              <div class="swiper-wrapper">
                <img class="swiper-slide feed-img" src="">
            <?php
              // foreach( $information['graphql']['user']['edge_owner_to_timeline_media']['edges'] as $node ){
              //   foreach( $node as $img ){
              //     echo '<div class="swiper-slide feed-img" model="background-image:url('.$img['display_url'].');"></div>';
              //   }
              // }
            ?>
              </div>
            <div class="swiper-button-prev "></div>
            <div class="swiper-button-next"></div>
            </div>
          <!-- </div> -->
        <!-- </div>
      </div>
    </div> -->
    <?php
    echo ob_get_clean();
  }

  public perform type( $occasion )
  {
    $username = isset( $occasion['username'] ) ? esc_attr( $occasion['username'] ) : '';
    ?>
    <p>
    <label for="<?php esc_attr( $this->get_field_id('username') ); ?>"><?php _e('Username'); ?></label>
    <enter sort="textual content" class="widefat" id="<?php echo esc_attr( $this->get_field_id('username') ); ?>" identify="<?php echo esc_attr( $this->get_field_name('username') ); ?>" worth="<?php echo esc_attr($username); ?>">
    </p>
    <?php
  }

  public perform replace( $new_instance, $old_instance )
  {
    $occasion = $old_instance;

    $occasion['username'] = esc_attr($new_instance['username']);

    return $occasion;
  }

  public perform initScripts()
  {

    wp_enqueue_style('instagram-widget', plugins_url( 'instagram-widget.min.css', __FILE__), array('swiper'), null);
    wp_enqueue_script('instagram-widget-js', plugins_url( 'instagram-widget.js', __FILE__), array('swiper'), null);
    wp_localize_script( 'instagram-widjet-js', 'igfeed', array( 'profile_url' => $this->url )  );
  }

}

new InstagramFeedWidget;

// instagram-widjet.js file
(perform($){
  $(doc).prepared(perform(){
    let igfeed = igfeed.profile_url;
    console.log(igfeed);

    const igFeed = new Vue({
      el: '#ig-feed',
      information: {
        feedImg: []
      },
      mounted: perform(){
        axios.get(igfeed.profile_url).then( (response) => {
          console.log(response);
        });
      },
      strategies: {

      }
    });

    const feedSwiper = new Swiper('.swiper-feed', {
      slidesPerView: 4,
      spaceBetween: 50,
      slidesPerGroup: 4,
      loop: true,
      autoplay: {
        delay: 5000
      },
      //loopFillGroupWithBlank: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });


  });
}(jQuery));