如何实现随v-if隐藏DOM元素动态更新select下拉选项？

当然可行啦！你的代码没能实现选项更新的核心问题，出在用了methods而非computed属性，还有DOM查询的小细节错误。咱们一步步来解决：

问题根源分析 #

1. methods不会自动响应变化：methods里的函数只有在主动调用时才会执行，它不会追踪依赖的变化——当v-if控制的元素显示/隐藏时，visibleElements()不会自动重新计算，所以select的选项不会更新。而computed属性会自动监听依赖的响应式数据变化，实时返回新结果，完美适配你的需求。
2. DOM查询的语法错误：document.getElementById(#el-1584610039188)里多了个#前缀，getElementById的参数是元素的纯ID值，不需要加选择器符号。

优化后的解决方案 #

更推荐的是遵循Vue数据驱动的设计思路，不要直接查询DOM，而是通过控制v-if的数据源来判断元素可见性。以下是完整示例：

<!-- 假设你的元素是用v-if绑定响应式数据控制显示 -->
<div id="el-1584610039188" v-if="isEl1Visible">我是可切换的元素</div>
<!-- 其他需要监控的元素同理 -->
<div id="el-1234567890" v-if="isEl2Visible">另一个可切换元素</div>

<select class="form-control-sm float-sm-right ml-2">
  <option v-for="item in visibleElements" :key="item.id" :value="item.id">
    {{ item.id }}
  </option>
</select>

<script>
export default {
  data() {
    return {
      isEl1Visible: true, // 控制第一个元素的显示状态
      isEl2Visible: false // 控制第二个元素的显示状态
    }
  },
  computed: {
    visibleElements() {
      const elements = []
      
      // 根据响应式数据判断元素是否可见，而非直接查DOM
      if (this.isEl1Visible) {
        elements.push({ id: '1584610039188' })
      }
      if (this.isEl2Visible) {
        elements.push({ id: '1234567890' })
      }
      
      return elements
    }
  }
}
</script>

特殊场景的兼容方案 #

如果因为业务限制必须直接查询DOM（不推荐），可以通过watch监听可能影响元素可见性的变量，或者在updated钩子中手动更新选项列表，但这种方式不如数据驱动简洁可靠。

只要切换成computed属性来维护可见元素列表，就能实现select选项随元素显示/隐藏实时更新的效果啦！

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