looping through Json and filtering only data that contains values

Question

I am trying to remove a div if the data in Json file doesnt contain a value. I am passing data through a json file to my modal. The modal has a div for social media. If the data in the Json file is empty, the div with social media isn't displayed on the modal.

This is what I tried:

    <transition name="component-fade">
      <div class="modal_overlay" >
          <div
            class="modal_container"
            role="dialog"
            aria-modal="true"
            @click="$emit('close-modal')"
            id="syogekiModal"
            tab-index="-1"
            aria-labelledby="modal-1-title"
          >
            <span class="modal_close_position">
              <button
                class="modal_close"
                aria-label="Close modal"
                @click="$emit('close-modal')"
                @click.stop
              ></button>
            </span>
            <div class="scroll_area">
            <div class="modal_content" id="modal-1-content">
                <div class="modal_img">
                  <img :src="passedData.profile_img">
                </div>
                <div class="modal_name bold" id="modal-1-title ">
                  <p class="modal_name" >{{passedData.artist_name}}</p>
                </div>
                <div class="modal_txt" >
                  <p>{{passedData.artist_profile}}</p>
                </div>
                <div id="modal_sns">
                <ul class="modal_sns_list">
                  <li class="modal_sns_list_item">
                    <a :href="passedData.instagram"
                    target="_blank"
                      ><img
                        src="/img/event/syogeki/profile/sns_instagram.png"
                        alt="instagram"
                        class="logo_sns"
                    /></a>
                  </li>
                  <li class="modal_sns_list_item">
                    <a :href="passedData.twitter"
                    target="_blank"
                      ><img
                        src="/img/event/syogeki/profile/sns_twitter.png"
                        alt="Twitter"
                    /></a>
                  </li>
                </ul>

export default {
  i18n,
  props: ['lang', 'passedData'],

data() {
    return {
      top_flag: false,

    }
  },

  methods: {
    init: function () {
    this.get_data_filtered();
    },
      get_data_filtered(){
        console.log(passedData);
        let element = document.getElementById("modal_sns")
       if (passedData.instagram === "") {  
        element.remove();      
//This is not going anywhere, I am not able to filter through the data to remove those who are empty... The data has been filtered on the main file which passes the data to this modal. So I don't think I need to filter the data again here...
      }

    },

  }
}

</script>

This is how my json file contains for example:

{
"en":
\[{
"img":"/img/event/syogeki/profile/profile_item01_en.png",
"artist_name": "Chairperson：Ren Sawamura",
"artist_profile": "Born on May 24, 1982. He appears in the industry like a comet. A man of mystery, Sawamura Ren .",
"profile_img": "/img/event/syogeki/profile/ren_modal.jpg",
"instagram": ", //here these is no data so the div called modal_sns should be removed...
"twitter": ""
},

Answer 1

There is a concept in Vue called computed properties. You don't need any init function if you work with properties.

export default {
  //. . . 
  computed: {
    profile() {
      // normally it would be better to
      // pass only data, that is filled,
      // but you can return it like this
      return this.passedData[this.lang]
    }
  }
}

And then use v-if in your template

<div v-if="profile?.instagram">
  {{profile.instagram}}
</div>

But in general I would structure the props of your component differently.

You should pass the selected data directly as props and not select data inside your component.