Vue开发求助：如何基于屏幕尺寸使用v-if？媒体查询单选按钮异常

我想根据屏幕尺寸，通过v-if在页面的不同容器中渲染2组按钮，有两个疑问：

1. 能不能通过@media CSS媒体查询直接更改元素的父容器？
2. 如何在v-if的条件中正确使用屏幕尺寸参数？

我尝试直接在模板中写：

<div v-if="window.innerWidth < 860">
<!-- 按钮代码 -->
</div>

但报错：TypeError: Cannot read properties of undefined (reading 'innerWidth')

另外，如果仅用媒体查询控制按钮显示，单选按钮会出现bug：需要点击两次才能显示:checked样式；如果用@media配合多组按钮，会出现实际绑定到同一变量的4个按钮（两组各2个），导致状态混乱。

相关代码如下：

按钮代码 #

<label>
  <input type="radio" name="month-season" id="month" value="month" v-model="monthSeason">
  <null-button>
     <img src="../assets/green-smile.png" alt="#" id="month-icon">
     text
  </null-button>
</label>

null-button组件代码 #

<div class="parent">
  <div class="container">
    <slot></slot>
  </div>
</div>

按钮样式 #

.month-season {
    text-align: right;

    label {
        .container {
            color: rgba(45, 206, 137, 1);
            background: white;
            img {
                margin: 0 4px 0 0;
            }
        }
        input:checked + .parent .container {
            background: rgba(45, 206, 137, 1);
            color: white;
            img {
                filter: brightness(1000%);
            }
        }
        input {
            appearance: none;
        }
    }
}

错误截图：

一、关于@media能否更改元素父容器 #

CSS媒体查询无法修改DOM结构，只能控制元素的显示/隐藏、布局样式等。如果要改变元素的父容器，必须通过JavaScript动态操作DOM，或者在Vue中用v-if进行条件渲染（推荐后者，符合Vue响应式逻辑）。

二、在v-if中正确使用屏幕尺寸参数 #

不能直接在Vue模板中访问window——在SSR场景或组件初始化阶段，window对象可能未挂载，就会触发你遇到的“无法读取innerWidth”错误。正确实现方式：

1. 在组件中定义响应式变量存储屏幕宽度
2. 监听窗口resize事件更新变量
3. 在模板中用该变量作为v-if的判断条件

代码示例：

<template>
  <!-- 小屏幕容器 -->
  <div v-if="screenWidth < 860" class="small-screen-container">
    <label>
      <input type="radio" name="month-season-small" value="month" v-model="monthSeason">
      <null-button>
        <img src="../assets/green-smile.png" alt="#" id="month-icon">
        text
      </null-button>
    </label>
  </div>

  <!-- 大屏幕容器 -->
  <div v-else class="large-screen-container">
    <label>
      <input type="radio" name="month-season-large" value="month" v-model="monthSeason">
      <null-button>
        <img src="../assets/green-smile.png" alt="#" id="month-icon">
        text
      </null-button>
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      screenWidth: 0,
      monthSeason: 'month',
      resizeTimer: null
    }
  },
  mounted() {
    // 初始化屏幕宽度
    this.screenWidth = window.innerWidth
    // 添加窗口 resize 监听
    window.addEventListener('resize', this.updateScreenWidth)
  },
  beforeUnmount() {
    // 移除监听，避免内存泄漏
    window.removeEventListener('resize', this.updateScreenWidth)
  },
  methods: {
    updateScreenWidth() {
      // 防抖处理，避免窗口 resize 时频繁触发更新
      clearTimeout(this.resizeTimer)
      this.resizeTimer = setTimeout(() => {
        this.screenWidth = window.innerWidth
      }, 200)
    }
  }
}
</script>

注意：两组按钮的name属性要区分开（比如month-season-small和month-season-large），避免同一页面存在同名单选框导致状态混乱——这也是你之前用@media时出现“4个按钮绑定同一变量”的核心原因。

三、修复单选按钮点击两次才生效的bug #

你的CSS选择器本身没问题，但如果存在两组按钮同时留在DOM中（比如用v-show而非v-if），会导致单选框状态冲突。另外可以尝试以下优化：

1. 确保用v-if而非v-show切换按钮组，让未匹配的按钮组完全从DOM中移除
2. 给单选框添加@change事件强制更新视图（解决响应式延迟问题）：

<input 
  type="radio" 
  name="month-season-small" 
  value="month" 
  v-model="monthSeason"
  @change="$forceUpdate()"
>

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