css - 浏览器没有在 Vue JS 中切换媒体查询

Question

我有一个如下组件：

<template lang="html">
  <div>
    <LandscapeBadge  v-if="printLayout === 'Landscape'"></LandscapeBadge>
    <PortraitBadge  v-if="printLayout === 'Portrait'"></PortraitBadge>
  </div>
</template>

在有条件渲染的每个组件中，我都有一个用于确定打印布局的媒体查询

<style scoped>
  @page {
    size: portrait; // or landscape
  }
</style>

但是，当我处于横向模式时，浏览器仍以纵向模式打印。如果我把它放在css前面，我可以强制它回到横向模式 !important，但是当我切换回纵向时，它卡在横向模式下。

任何人都可以帮助阐明这一点吗？

标签： cssvue.js