草庐IT

vue-class-component

全部标签

javascript - 如何解决 Component should be written as a pure function error in eslint-react?

constHeader=React.createClass({contextTypes:{router:React.PropTypes.object.isRequired,},render(){return(AB);},});我使用eslint-config-airbnb检查上面的代码,它向我显示一条错误消息,例如Componentshouldbewrittenasapurefunction。那么如何将上面的组件改成纯函数呢?感谢您的帮助。 最佳答案 当你有一个“哑”组件(没有内部状态、生命周期方法等)时,你可以将它写成一个简单的j

javascript - 在 Vue.js 中注入(inject) <head>

我有一些外部脚本需要加载到各种页面上,例如GooglePlacesAutocomplete、FacebookAPI等。显然,将它们加载到每条路线上是没有意义的,但是文档并未解决这种相当常见的情况。此外,Vue实例挂载到正文中的标签上,因为themountedelementwillbereplacedwithVue-generatedDOMinallcases.Itisthereforenotrecommendedtomounttherootinstancetoor.现实世界的应用程序目前如何处理这种情况? 最佳答案 我推荐使用htt

javascript - Vue.js 从模板中分离样式

我使用带有的模板出于CMS原因,必须靠近其div的block。当我运行Vue.js时,它似乎删除了样式block,说...-TemplatesshouldonlyberesponsibleformappingthestatetotheUI.Avoidplacingtagswithside-effectsinyourtemplates,suchas,astheywillnotbeparsed.我能做什么?varapp=newVue({el:'#app'});#div_123{background:http://placehold.it/850x150;}@mediascreenand(m

javascript - 为什么 <Route component={Menu}/> 而不是 <Menu/>?

我的/About中有一个包含路线的子菜单。这个子菜单称为AboutMenu并出现在/About下的所有页面,例如=>/About/Company和/About/Info。练习示例显示与activeStyle={match.isExact&&selectedStyle}>我刚用过并添加了exact改为我的AboutMenu链接。为什么要使用而不是仅仅渲染?exportconstAboutMenu=(props)=>{return(CompanyHistoryVision)}关于部分constAbout=(props)=>{return({/*OR?*/})}exportdefaultAb

javascript - 在 vue.js 模板中包含外部脚本

我是Vue.js和web-pack的新手,所以我决定使用vue-cli(webpack)来构建初始应用程序。我试图在模板中包含一个外部脚本(例如),这在全局范围内(对于每个页面/组件)都不需要,但是Vue警告说这是不允许的。我的index.html文件与最初生成的文件类似:App我的App.vue也和生成的类似:我有一条路线到/upload在我的路由文件中,它映射到需要dropzone.js(外部脚本)的上传组件。我可以将它包含在我的index.html中,类似于加载Bootstrap的方式,但是当只有这个组件需要它时,为每个页面/组件加载它似乎不太理想。但是,如上所述,我无法将它直接

javascript - 将 css 注入(inject) Vue 组件?

见下文my-component.vue。此组件需要可主题化。它需要获取外部css表,因为我需要允许其他开发人员自定义其内部外观。除了acceptajavascriptobject还有其他方法吗??.A{background-color:green;}.B{background-color:red;}.C{background-color:yellow} 最佳答案 在你的组件中:exportdefault{props:{boxStyle:{type:String,default:'box-default'}}}.box-default

javascript - Vue.js 调试消息问题

我在前端使用Vue.jsv2.5.1构建了一个Web应用程序。该应用程序通常运行良好,但是当出现问题时,抛出的错误消息仅引用vue.js代码本身,而不是我的代码部分(我假设我的模板中有一些东西)无疑是实际来源问题。这是一个例子:ErrorinnextTick:"NotFoundError:Failedtoexecute'insertBefore'on'Node':Thenodebeforewhichthenewnodeistobeinsertedisnotachildofthisnode."warn@vue.js?v=1:491logError@vue.js?v=1:600global

javascript - 如何在 Vue.js - Nuxt - TypeScript 应用程序中访问路由参数?

我正在构建一个基于NuxtTypeScriptStarter的网站模板。我在我的页面文件夹中创建了一个动态路由的页面_id.vue,我想在我的TS类中访问该id属性。我可以通过编写{{$route.params.id}}在我的模板中访问它,但是当我尝试在类中引用$route时,我得到一个错误:errorTS2304:Cannotfindname'$route'. 最佳答案 作为一个简单的解决方案,尝试从vue-router导入路由,如下所示:importComponentfrom"vue-class-component"import

javascript - 使用 Styled-Components,如何在 Styled Component 之外设置颜色数组?

theme.js-我有一个Styled-Components主题,其中包含我应用的所有颜色变化。constcolors={purples:{60:'#AEA',50:'#GSA',},blues:{20:'#asd',5:'#fasd',}...然后我有一个UI组件,我需要在其中按特定顺序定义一组颜色:importReactfrom'react';constcolors=['#GSA','#AEA','#asd','#fasd','#AEA'];我稍后使用此colors数组根据状态找到要在我的组件中使用的正确颜色:constgetBackgroundColor=({currentPos

javascript - 使用 Jest 模拟在 vue 组件中导入的模块

我在处理documentationofJest时遇到一些问题,因为我希望这段代码能够工作:importVuefrom'vue';importRouterfrom'@/router/index';importOrdersServicefrom'@/services/orders.service';jest.mock('@/services/orders.service');describe('OrdersItem.vue',()=>{beforeEach(()=>{//mockCleardoesnotexistOrdersService.mockClear();});it('should