Vue Warn]：属性“ iSmobileterminal”在渲染过程中访问，但未定义

发布于 2025-02-07 18:37:01 字数 965 浏览 2 评论 0原文

我正在从事移动和PC的项目，我需要估算移动终端或PC终端。 fixible.js

import { computed } from 'vue'
import { PC_DEVICE_WIDTH } from '../constants'
import { useWindowSize } from '@vueuse/core/index'

const { width } = useWindowSize()

// 判断当前是否为移动设备，判断依据屏幕宽度是否小于一个指定宽度（1280）
export const isMobileTerminal = computed(() => {
  return width.value < PC_DEVICE_WIDTH
})

和导航/索引。VUE代码是

<template>
  <mobile-navigation v-if="isMobileTerminal"></mobile-navigation>
</template>

<script>
import { isMobileTerminal } from '../../../../utils/flexible'
import mobileNavigation from './mobile/index.vue'
export default {
  name: 'index',
  components: {
    mobileNavigation
  }
}
</script>

<style lang="scss" scoped></style>

我的项目目录 “在此处输入图像说明”

原文

I'm working on a project that's both mobile and PC，I need to estimate the mobile terminal or PC terminal。
flexible.js

import { computed } from 'vue'
import { PC_DEVICE_WIDTH } from '../constants'
import { useWindowSize } from '@vueuse/core/index'

const { width } = useWindowSize()

// 判断当前是否为移动设备，判断依据屏幕宽度是否小于一个指定宽度（1280）
export const isMobileTerminal = computed(() => {
  return width.value < PC_DEVICE_WIDTH
})

and the navigation/index.vue code is

<template>
  <mobile-navigation v-if="isMobileTerminal"></mobile-navigation>
</template>

<script>
import { isMobileTerminal } from '../../../../utils/flexible'
import mobileNavigation from './mobile/index.vue'
export default {
  name: 'index',
  components: {
    mobileNavigation
  }
}
</script>

<style lang="scss" scoped></style>

My project catalog is shown below
enter image description here

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

七月上 2025-02-14 18:37:01

ismobileterminal仅在您的组件中导入。还需要通过在组件定义中声明该模板来提供该模板。

从

<script>
import { isMobileTerminal } from '../../../../utils/flexible'

export default {
  setup() {
    return {
      isMobileTerminal
    }
  }
}
</script>

isMobileTerminal is only imported in your component. It also needs to be made available to the template by declaring it in your component definition.

Returning it from the setup() hook is one way to do that:

<script>
import { isMobileTerminal } from '../../../../utils/flexible'

export default {
  setup() {
    return {
      isMobileTerminal
    }
  }
}
</script>

回复收藏 0 原文

~没有更多了~