关键词:
【中文标题】无法读取未定义的属性“移动”-Vue/Vuetify/Storybook【英文标题】:Cannot read property 'mobile' of undefined - Vue/Vuetify/Storybook 【发布时间】:2021-04-05 15:43:38 【问题描述】:我在使用 vue 和 vuetify 渲染我的故事书故事中的“画布”屏幕时遇到问题。 我有其他组件工作正常,但这个没有。 似乎我的故事无法识别 vuetify 的这种“移动”属性。另外,我没有找到确切的位置,也没有找到为什么只在这个组件中调用这个属性,我试图从组件中删除所有与移动相关的 scss,但没有成功。
它显示以下错误:
TypeError: Cannot read property 'mobile' of undefined
at VueComponent.isMobile (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:289475:23)
at Watcher.get (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:243936:25)
at Watcher.evaluate (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:244041:21)
at VueComponent.computedGetter [as isMobile] (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:244291:17)
at VueComponent.genHeaders (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:262289:24)
at VueComponent.genDefaultScopedSlot (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:262621:178)
at Object.normalized [as default] (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:242050:37)
at Proxy.render (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:261032:66)
at VueComponent.Vue._render (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:243005:22)
at VueComponent.updateComponent (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:243523:21)
如果我切换到“文档”屏幕并重新加载它呈现的页面。
故事书配置:
// main.js
const path = require('path');
module.exports =
"stories": [
"../docs/**/*.stories.mdx",
"../docs/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials"
],
webpackFinal: async (config, configType ) =>
config.resolve.alias =
...config.resolve.alias,
"~": path.resolve(__dirname, "../"),
"@components": path.resolve(__dirname, "../src/components"),
;
config.module.rules.push(
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
loader: 'sass-loader',
options:
additionalData: `
@import "_variables";
@import "_globals";
@import "_main";
`,
sassOptions:
includePaths: ['src/assets/scss'],
,
],
include: path.resolve(__dirname, '../'),
);
return config;
// Preview.js
import addDecorator from '@storybook/vue';
import vuetify from './vuetify_storybook';
export const parameters =
actions: argTypesRegex: "^on[A-Z].*" ,
addDecorator(() => (
vuetify,
template: `
<v-app style="height: 200px">
<story/>
</v-app>
`
))
// vuetify__storybook.js
import Vue from 'vue';
import Vuetify from 'vuetify';
import config from '../docs/plugins/vuetify.js';
Vue.use(Vuetify);
export default new Vuetify(config);
// vuetify.js (plugins/)
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import '@mdi/font/css/materialdesignicons.css';
Vue.use(Vuetify);
export default new Vuetify(
theme:
themes:
light:
primary: '#5C068C',
secondary: '#8345A5',
accent: '#82B1FF',
error: '#FF5252',
info: '#2196F3',
success: '#4CAF50',
warning: '#FFC107'
,
,
,
icons:
iconfont: 'mdi',
,
);
【问题讨论】:
我在 vuepress 1.3.1 + vuetify 2.3.18 在 VDataTable 中的 VData 中也遇到了这个问题 @YuriFBecker我认为渲染vuetify对象可能有问题,我会告诉你先检查obj 我在测试框架 "karma": "^6.1.1" 上的 Vuetify 2.4.4 上的 v-data-table 遇到了同样的问题,我仍然没有解决问题。跨度> 【参考方案1】:经过数周的艰苦试验和错误,这是一个可行的解决方法:
在 .stories.js(或 .ts)文件的顶部,添加以下行:
import vuetify from '@/plugins/vuetify' // or where-ever your Vuetify is initialized
然后当你声明你的故事书模板时,传入你的 vuetify 对象
const Template = (args, argTypes ) => (
props: Object.keys(argTypes),
components: YourComponent ,
vuetify, // <-- Very important line
template: `
<v-app> <!-- and wrap your component with v-app -->
<YourComponent />
</v-app>
`
)
运行你的故事,它应该可以工作
【讨论】:
这是一种解决方法。但是我们看到问题确实是故事书没有正确创建 vuetify 对象。它与 vuetify 2.x 不兼容 如果不起作用,您可以使用 import Vuetify from 'vuetify' 和 vuetify: new Vuetify(),无法读取未定义的属性 - cdkDropListData 拖放角材料
】无法读取未定义的属性-cdkDropListData拖放角材料【英文标题】:Cannotreadpropertyofundefined-cdkDropListDatadrag-dropAngularMaterial【发布时间】:2019-05-2113:52:37【问题描述】:我正在使用新的Angular7MaterialCDK拖放功能将项目从一个列表移动到... 查看详情
Angular2:无法读取未定义的属性“名称”
】Angular2:无法读取未定义的属性“名称”【英文标题】:Angular2:Cannotreadproperty\'name\'ofundefined【发布时间】:2017-02-0621:30:21【问题描述】:我开始学习Angular2。我一直在关注angular.io提供的英雄教程。一切正常,直到我对使用模板... 查看详情
无法读取未定义类型错误的属性“推送”:无法读取未定义错误的属性“推送”
】无法读取未定义类型错误的属性“推送”:无法读取未定义错误的属性“推送”【英文标题】:Cannotreadproperty\'push\'ofundefinedTypeError:Cannotreadproperty\'push\'ofundefinederror【发布时间】:2017-08-1215:09:44【问题描述】:我已经定义了一... 查看详情
`无法读取未定义的属性(读取'组件')`
】`无法读取未定义的属性(读取\\\'组件\\\')`【英文标题】:`Cannotreadpropertiesofundefined(reading\'component\')``无法读取未定义的属性(读取\'组件\')`【发布时间】:2021-11-2420:37:59【问题描述】:错误:Cannotreadpropertiesofundefined(reading\... 查看详情
离子框架中的 RaphaelJS:TypeError:无法读取未定义的属性“路径”
】离子框架中的RaphaelJS:TypeError:无法读取未定义的属性“路径”【英文标题】:RaphaelJSinIonicFramework:TypeError:Cannotreadproperty\'path\'ofundefined【发布时间】:2017-06-0902:20:35【问题描述】:我正在使用Ionic框架创建移动应用程序。在这... 查看详情
Firebase 函数:无法读取未定义的属性“user_id”
】Firebase函数:无法读取未定义的属性“user_id”【英文标题】:Firebasefunctions:cannotreadproperty\'user_id\'ofundefined【发布时间】:2018-09-1318:56:15【问题描述】:我正在尝试使用我的移动应用程序执行一个简单的helloworldfirebase功能,我... 查看详情
React Native 的 Firebase 初始错误(无法读取未定义的属性“getItem”)
】ReactNative的Firebase初始错误(无法读取未定义的属性“getItem”)【英文标题】:FirebaseinitialerrorwithReactNative(Cannotreadproperty\'getItem\'ofundefined)【发布时间】:2017-06-1416:15:13【问题描述】:我正在使用Reactnative开发一个移动应用程序... 查看详情
使用地图时反应'无法读取未定义的属性'
】使用地图时反应\\\'无法读取未定义的属性\\\'【英文标题】:React\'cannotreadpropertyofundefined\'whenusingmap使用地图时反应\'无法读取未定义的属性\'【发布时间】:2017-12-1402:23:02【问题描述】:我正在从teamtreehouse.com制作一个非常基... 查看详情
带有 Ionic 4 的 SQLite?无法读取未定义类型错误的属性“then”:无法读取未定义的属性“then”
】带有Ionic4的SQLite?无法读取未定义类型错误的属性“then”:无法读取未定义的属性“then”【英文标题】:SQLitewithIonic4?Cannotreadproperty\'then\'ofundefinedTypeError:Cannotreadproperty\'then\'ofundefined【发布时间】:2018-09-2519:28:32【问题描述... 查看详情
无法读取未定义的属性(读取“位置”)
】无法读取未定义的属性(读取“位置”)【英文标题】:Cannotreadpropertiesofundefined(reading\'location\')【发布时间】:2021-12-2018:27:12【问题描述】:我写了这段代码:importReactfrom\'react\';importReactDOMfrom\'react-dom\';importAppfrom\'./App\';import... 查看详情
NestJS:无法读取未定义的属性“'createObjectLiteralExpression'”
】NestJS:无法读取未定义的属性“\\\'createObjectLiteralExpression\\\'”【英文标题】:NestJS:Cannotreadproperty"\'createObjectLiteralExpression\'"ofundefinedNestJS:无法读取未定义的属性“\'createObjectLiteralExpression\'”【发布时间】:2021-10-1206:4... 查看详情
无法读取未定义的“已触及”属性
】无法读取未定义的“已触及”属性【英文标题】:Cannotreadproperty\'touched\'ofundefined【发布时间】:2017-07-0403:16:44【问题描述】:为什么我会收到此错误无法读取未定义的属性?为什么它不能读取formName.controls[\'email\'].touched,但... 查看详情
NextJS:未捕获的类型错误:无法读取未定义的属性(读取“属性”)
】NextJS:未捕获的类型错误:无法读取未定义的属性(读取“属性”)【英文标题】:NextJS:UncaughtTypeError:Cannotreadpropertiesofundefined(reading\'attributes\')【发布时间】:2021-12-2521:15:21【问题描述】:每当我尝试在以下函数中的NextJS中... 查看详情
无法读取未定义的属性(“读取参数”)
】无法读取未定义的属性(“读取参数”)【英文标题】:Cannotreadpropertiesofundefined(\'readingparams\')【发布时间】:2022-01-0814:46:56【问题描述】:谁能帮我解决我的错误这是我的代码:constProductScreen=(match,history)=>const[qty,setQty]=useS... 查看详情
查询返回错误“无法读取未定义的属性(读取'节点')”
】查询返回错误“无法读取未定义的属性(读取\\\'节点\\\')”【英文标题】:Queryreturningerror"Cannotreadpropertiesofundefined(reading\'nodes\')"查询返回错误“无法读取未定义的属性(读取\'节点\')”【发布时间】:2022-01-1901:07:58... 查看详情
未捕获的类型错误:无法读取未定义的属性“区域”?
】未捕获的类型错误:无法读取未定义的属性“区域”?【英文标题】:UncaughtTypeError:Cannotreadproperty\'regional\'ofundefined?【发布时间】:2016-06-1502:07:11【问题描述】:我正在为法语使用jQueryUI日历。但不幸的是,我看到以下错误,... 查看详情
无法读取未定义 MongoDB 的属性“集合”
】无法读取未定义MongoDB的属性“集合”【英文标题】:Cannotreadproperty\'collection\'ofundefinedMongoDB【发布时间】:2018-06-1200:24:49【问题描述】:我正在尝试使用Node和MongoDB执行CRUD操作。我收到以下错误。TypeError:无法读取未定义的属... 查看详情
无法读取未定义的属性(读取“preventDefault”)
】无法读取未定义的属性(读取“preventDefault”)【英文标题】:Cannotreadpropertiesofundefined(reading\'preventDefault\')【发布时间】:2021-12-3121:52:54【问题描述】:我需要你的帮助。我有一个我无法解决的问题。我是新来的。我正在尝试... 查看详情