Vue模态框：根据JSON字段值控制社交模块Div显示问题

需求：当JSON文件中的Instagram、Twitter等社交平台字段为空时，不显示Vue模态框中的社交模块div#modal_sns。

我将过滤后的JSON数据传入模态框组件后，尝试用原生DOM操作实现，但未生效，同时疑惑主文件已完成数据过滤的情况下，是否无需在组件内再次处理。

现有代码 #

HTML模板 #

<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>
        </div>
        </div>
      </div>
  </div>
</transition>

组件JS代码 #

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();      
        // 此方法未生效，无法根据空值数据移除对应元素...传入组件的数据已在主文件完成过滤，是否无需在此再次过滤？
      }
    },
  }
}

JSON示例数据 #

{
  "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": "", // 此处无数据，应移除modal_sns对应的div
      "twitter": ""
    }
  ]
}

解决方法 #

问题根源 #

原生DOM操作失效的核心原因：

1. 组件初始化时DOM尚未完成渲染，document.getElementById("modal_sns")无法获取到目标元素
2. 违背Vue「数据驱动视图」的设计理念，直接操作DOM不是Vue项目的最佳实践

正确实现方式 #

使用Vue的v-if指令实现条件渲染，完全不需要手动操作DOM：

方案一：仅当至少一个社交平台有值时显示整个模块

给社交模块的外层div添加v-if，判断Instagram或Twitter是否有有效值（.trim()用于过滤仅含空格的空字符串）：

<div id="modal_sns" v-if="passedData.instagram.trim() || passedData.twitter.trim()">
  <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>
</div>

方案二：单个社交项按需显示（更灵活）

如果需要只显示有值的社交平台，给每个<li>也添加v-if：

<div id="modal_sns" v-if="passedData.instagram.trim() || passedData.twitter.trim()">
  <ul class="modal_sns_list">
    <li class="modal_sns_list_item" v-if="passedData.instagram.trim()">
      <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" v-if="passedData.twitter.trim()">
      <a :href="passedData.twitter" target="_blank">
        <img src="/img/event/syogeki/profile/sns_twitter.png" alt="Twitter" />
      </a>
    </li>
  </ul>
</div>

关于数据过滤的疑问 #

如果主文件已经完成数据过滤（比如将空值字段置为null或直接移除），组件内直接用v-if判断即可，不需要额外在组件内重复过滤。

清理冗余代码 #

删除组件内的get_data_filtered方法和init方法的调用，因为已经不需要原生DOM操作逻辑。

内容的提问来源于stack exchange，提问作者Alcides Takeyoshi