草庐IT

vue组件

全部标签

javascript - 设置实用程序类并在 vue 组件中使用它

我正在开发的一个vue应用程序目前有很多与日期函数相关的代码冗余。为了减少这些冗余,我想创建一个如下所示的实用程序类,导入它并将其设置为组件内的Vue数据属性,这样我就可以在其中调用日期函数。我不确定实现它的最佳方式。当前的实现导致错误提示TypeError:this.datesisundefined,我的目标不仅是解决此错误,而且还使用最佳标准在Vue环境中创建/使用该类。导入工具类importDatesfrom"./utility/Dates";...组件constcontactEditView=Vue.component('contact-edit-view',{data(){r

javascript - 在 react 中从同一文件导入多个组件而不是导入每个组件的正确方法是什么

我在一个文件中有多个组件或多个常量,如何导入所有这些组件或常量。有什么方法可以导入所有组件而不是在导入语句中提及每个组件。请引用下面的例子;`//Constants.jsexportconstvar1="something"exportconstvar2="something"exportconstvar3="something"exportconstvar4="something"exportconstvar5="something"exportconstvar6="something"exportconstvar7="something"...//App.jsimport{var1

javascript - react 中的 props.children 不能是无状态组件?

我正在尝试在React中练习渲染Prop模式,但出现了错误this.props.childrenisnotafunction这是我的代码importReactfrom'react';import{render}from'react-dom';constBox=({color})=>(thisisbox,withcolorof{color});classColoredBoxextendsReact.Component{state={color:'red'}getState(){return{color:this.state.color}}render(){returnthis.props

javascript - 如何在 Angular 5 组件中有条件地加载 templateUrl html 文件

我的项目中有一个场景,考虑一下,我有一个testDynamic组件@Component({templateUrl:"./test-dynamic.html",//NeedtooverridethisfilestyleUrls:['./test-dynamic.css']})exportclasstestDynamic{constructor(){}}这里需要检查覆盖文件夹中是否存在override1.html文件,然后加载此文件作为templateUrl,否则加载组件默认的test-dynamic.html。知道如何实现这一目标吗?引用下图可以清楚理解 最佳

javascript - React Router v4 Router 组件中的所有内容都会在每次路由更改时重新呈现

我试图更好地理解为什么每当ReactRouterv5中的路由发生变化时我的所有组件都会重新渲染。请注意,这些组件只是重新渲染,而不是重新安装。当我在开发工具中打开React扩展并选中HighlightUpdates复选框时,我可以看到在更改路由时我的所有组件都被勾勒出来,甚至是比路由匹配级别更高的组件:在这个简单的示例中,我希望更改路由不会重新呈现MyHeader组件,因为没有任何更改。但是,我仍然会看到开发工具的亮点。我认为这是预期的,因为文档中的所有示例都表现出相同的行为。我的问题有两个方面。1)使像MyHeader这样的组件重新渲染的实际原因是什么?似乎没有任何Prop或状态正在

javascript - 如何使表格行可点击并展开行 - vue.js - element-ui

我正在使用具有可扩展行功能的表格。单击展开图标时该行会展开,您可以查看示例HERE.但是,我想要做的是,entirerow可点击和切换展开和折叠行就像点击展开图标时一样。请帮忙。这是我的标记:el-table(:data="tableData")el-table-column(label="EmployeeName",prop="userName")el-table-column(label="CompanyName",prop="companyName")el-table-column(type="expand",align="right")template(slot-scope="

javascript - 如何将项目推送到 Vuejs 中数据对象的数组中? Vue 似乎没有在看 .push() 方法

我正在尝试将对象添加到我在Vue实例数据对象中声明的数组中。我可以在状态的购买对象中设置值,但是当我将数据推送到订单队列数组时,不会填充空数组。正在触发函数,但数组没有更新。这是我的表格:@csrfProduct@foreach($productsas$product){{$product->name}}@endforeachSelectaproductQuantityProductquantityadd  QUEUE这是我的javascript:require("./bootstrap");window.Vue=require("vue");Vue.compone

javascript - 如何从 .vue 文件中导出多个对象

我在Vue中使用typescript。对于这个特定的用例,我想从我的.vue文件中导出多个项目。像这样://FooBar.vue...exportclassFooextendsVue{foo:string="foo";}exportconstBar={bar:"bar"};然后像这样导入它们://巴兹.vueimport{Foo,Bar}from'FooBar.vue';@Components({components:{Foo}})...//restofthecode有没有办法从Vue中的.vue文件导出多个对象? 最佳答案 在你的

javascript - 在 React Native 中动态添加组件时如何启用流畅的动画?

在我的ReactNative应用程序中,我有一张带有条件的卡片按下按钮时呈现并在触发相同按钮时删除的组件。这是我的代码的样子:this.setState({triggered:!this.state.triggered})}title="ClicktoExpand"/>Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolabori

javascript - NativeScript Vue - 基于用户登录状态的条件激活

我正在使用NativeScript-Vue。我有一些protected页面(仅限成员(member))。我在本地存储中维护用户的登录数据。我有两个问题:当用户打开应用程序时,我们应该在应用程序的哪个位置编写代码来检索用户的登录数据。我想从本地存储中读取数据并将其填充到Vuex存储中。我知道如何从localstorage读取数据,但我不知道应该在何处/何时执行此操作,以便用户首先登录。有几个页面受到保护(仅限成员(member))。对于这些用户,如果他们已登录(基于vuex商店),我想向他们显示页面内容,但如果他们未登录,我希望他们被导航到登录页面。我再次对应该在哪里编写此代码/条件感到