Vuejs2 如何在使用Vue.js单击按钮后加载另一个组件

我正在创建一个应用程序,但是,我希望当我单击“注册”时,register()会执行,并且在返回我希望路由到登录路由的承诺时 我不想停留在同一个注册页面上,而是想转到登录页面 register(){ axios.post('url', { username: this.username, password:this.password }) .then(function (response) { console.log(response); }) .

Vuejs2使计数器保持最新

我试图使用pusher为聊天室中的用户列表动态获取最新的计数器值。变量userscont由vue实例维护,并在模板中提供服务。vue调试工具在下面的代码中将其显示为undefined。我没有将变量正确地从实例传递到模板 聊天室播放器列表模板的调用方式如下: <div class="modal-body" id="sidebar-chat"> <div class="row"> <chat-player-list ref="users" :u

Vuejs2 如何使用vuejs和quasar单击按钮关闭塌陷?

我正在使用标记进行折叠操作。这很好。但我只需要通过Vue js单击其他按钮来关闭崩溃 因为我使用的是quasar,所以它有一些功能,比如open()和close(),我不知道如何实现它。因此,如果可能的话,有人可以帮助我如何继续。这很容易做到,因为类星体提供了这种开箱即用的功能 首先,参考你的类星体成分 <q-collapsible ref="myCollapsible"> ... </q-collapsible> <button @click="toggl

Vuejs2 vuetable中的路由器链接?

我在项目中使用vuetable 2。在这个表中,我从json获取数据。必须这样做,例如: 在it信息ORD1231**中有一列要订购,以此类推。当您单击其中一个单元格时,订单将转到另一个具有动态id的页面。实际上是一个问题,即如何在vuetable中推送路由器链接?您可以使用特殊字段来使用路由器链接 在中,使用 您可以使用props.rowData和props.rowdindex属性访问数据。您可以使用特殊字段来使用路由器链接 在中,使用 您可以使用props.rowData和props.row

Vuejs2 Vue js已安装滚动到特定div

我找到了这个脚本,当你点击按钮时,它可以正常工作。我想要实现的是,当页面加载时,它会自动滚动到特定的div 我怎样才能做到这一点 <button id="goto" @click="goto('porto')">Go to porto</button> <div class="page" ref="porto"> Porto page </div> methods: { goto(refName) { var e

Vuejs2 在Vue中的组件之间传递v型更改的简单方法

我正在使用Vuetify在仪表板()中创建几个组件。 如您所见,我有一个工具栏组件: Vue.component('toolbar', { template: ' <v-toolbar> <v-toolbar-side-icon @click="$emit('toggle')"></v-toolbar-side-icon> <v-toolbar-

Vuejs2 为什么';t我的v-if工作

有人能解释一下为什么这不起作用吗 我有以下内容,但生成了一个错误属性或方法“isloading”未在实例上定义,而是在渲染期间引用 <b-card v-if="isloading"> <h2>Loading ...</h2> </b-card> <b-card v-else> <case-summary :caseId='caseId'></case-summary> </b-card>

Vuejs2 元素UI-自定义标签表单选择组件

使用文档为的库element ui,我想知道为select组件选择选项后是否可以显示自定义标签 换句话说,是否可以显示一个插槽,而不是标签:label=“item.label” 我在文档中找不到任何内容。您可以使用:label属性中的javascript执行此操作,例如,将所选标签更改为“foo”: <span style="float: left">{{ item.value === value6 ? 'foo' : item.label }}</span> {

Vuejs2 强制重新计算到Vue计算属性?

是否可以在vue中重新计算计算的属性?我有一个简单的行项目总数(价格x数量)。如果选中该框并更改了输入值,则属性将重新计算。如果取消选中该框,则计算属性将保留。我想要的行为是将显示的值重置为0。我在考虑添加一个隐藏值,将复选框切换设置为1或0,然后将其添加到乘法中-即,this.line\u units*this.line\u rate*this.is\u切换,但这似乎有点老套。有人有更好的方法吗 <template> <tr :class="{ 'row-disabled':

Vuejs2 Vuex getter没有';在向现有对象添加元素时,无法识别状态更改。

我的州有一个名为tour\u plan的数组 我在vuex actions.js中有两个操作 选择您的位置 选择巡回演出 在select_location中,我会像这样提交到突变集合_location 提交(“设置地点”,{day,地点id,地点名称,地点付款}) 那么我的变异是 set_location(state, payload) { try { state.tour_plan.push(payload); } catch (err

Vuejs2 如何将段落更改为内容更改的输入?

我正在创建评论系统。我被封锁了。因为我想在单击“编辑”后将段落更改为输入。 这是我的代码: <section class="modal-card-body"> <p v-html="modalData.description" /> </section> <section class="modal-card-body"> <article class="media"> <figure class="medi

Vuejs2 @click.stop=“drawer=!drawer”在vuetify中不起作用

因此,我尝试在VueTify中使用导航抽屉中的切换功能,当d用户单击抽屉打开时的导航栏图标菜单,再次单击返回时,它应该关闭,但这不起作用。 我用这个@click.stop=drawer=!抽屉 但它只是打开而不是关闭回来 我附上了这张图片以供参考 这是工作代码笔: 这是工作代码笔: @chans:这不起作用,我也试过dat。你能分享一下导航抽屉的完整代码吗?或者你能创建一个代码笔吗?这对解决你的问题很有帮助faster@chans:得到一个临时修复,现在,不管怎样,我现在有另一个问题,单击nav

Vuejs2 Vuex:添加到prototype,以便我可以执行类似object.save()的操作?

我所有的Vuex模块都使用baseUPSERT,UPDATE,DELETE函数,因此我不希望在我的组件中键入这个.store.dispatch('UPSERT',object),而是键入object.save()。我认为这很容易,但不确定这样做是否有任何问题或如何做 导出接口ITaskMessage{ id?:字符串 消息:字符串| null save():任何 } 导出类TaskMessage实现ITaskMessage{ id?:字符串 消息:字符串| null='' 保存(){ 窗口。_操

Vuejs2 如何删除窗口。NUXT中的Vuex没有任何问题

我使用的是Nuxt 2.13,我的窗口出现问题。\uuuuNUXT\uuuuuuuu(函数(a,b,c,d,…)。我不知道这是否会影响我的搜索引擎优化,但它在我的神经和显示我所有的语言文件 情况如下:我的应用程序中有一个lang.json文件。我读取它并将其存储在lang状态下的Vuex。但是window.\uuuuuxt\uuuuuuu显示了我不想要的语言 到目前为止,我有三种解决方案来消除它: 1:通过将此代码添加到nuxt.config.js 挂钩:{ “vue渲染器:ssr:上下文”(

Vuejs2 Vue.js2-未呈现子组件

我是vuejs新手,刚开始玩它。在尝试不同的教程时,我被这个代码示例卡住了,它不起作用。有人能解释为什么没有渲染第二个组件吗 Vue.component('first-component'{ 模板:`这是第一个组件:{{val}}!`, 数据:函数(){ 返回{ 瓦尔:“第一” } }, }) Vue.组件(“第二组件”{ 模板:`这是第二个组件:{{val}`, 数据:函数(){ 返回{ 瓦尔:“第二” } }, }) 新Vue({ el:“#示例” }) 问题是您将放在了val变量中,并试

Vuejs2 使用uid和迭代

我试图根据一组数据迭代并选中一些复选框。我尝试的方法(使用\u uid)似乎不起作用 JS: //默认情况下将选中第二个复选框 var build=[true,true,false] 设增强=[ { 名称:“行动一” }, { 名称:“行动二” }, { 名称:“行动三” } ] Vue.component('clean-checkbox'{ 道具:[“增强”], 数据(){ 返回{ isSelected:'上的行动点', notSelected:“操作点关闭”, build:build[thi

Vuejs2 如果字符超过指定的字符数,请更改字体大小

如果vueJS中的名称超过15或20个字符,如何更改字体大小 这是我的密码 <p class="name" v-if="roleProfile"><b>{{ roleProfile.company_name }}</b></p> {{{roleProfile.company\u name} 创建一个计算属性,根据角色配置文件的长度将类添加到标记中。公司名称: computed: { profileClass() { let profi

Vuejs2 观察日期输入值并与v型一起使用

我花了4天时间试图从用户选择的输入中获取一个愚蠢的日期。看起来可能很简单,但请相信我,我在这里问,因为我没有解决方案了 我有一个页面/组件AddNewEvent,在这个输入中,用户添加了日期和时间。我必须把它放在我的v型车里,这样我才能把它送回数据库 我使用bootstrap4inputtype=“datetime local”获取日期和时间。我尝试使用一些vue插件来更新date,但所有插件都基于Bootstrap3,在项目中是Bootstrap4 内部模板: <div class="f

Vuejs2 如何对<;q-select>;使用vee验证?

下面是我想要检查验证的示例(至少选择一个选项) {{errors.first('role')} <q-select multiple inverted color="dark" stack-label="Roles" separator v-model="multipleSelect" :options="options1" v-validate="'required|in:x-builde

Vuejs2 重新加载组件

我有3个组件。它们是dashboard.vue、datatable.vue和modalbody.vue。登录我的应用程序后,进入dashboard.vue。在这里,我调用datatable.vue以显示包含一些道具的列表。我在datatable.vue中有一个按钮。如果我单击该按钮,将打开一个模式,使用modalbody.vue添加新记录以添加该列表(datatable.vue) 现在我需要在通过modal(modalbody.vue)插入新记录后重新加载该列表(datatable.vue) 我

Vuejs2 如何将vue转换为组件。vue

我有一把小提琴,可以改变图像的对比度和亮度 当我尝试将其作为.vue组件添加到我的站点时,滑块不再影响图像。我知道问题在于我的过滤功能。我只是不明白为什么my:style属性没有将更改应用于me元素 我做错了什么/没有得到什么 起作用的小提琴- my.vue组件的代码不起作用 <template> <div class="brightness-slider container"> <h1>{{ msg }}</h1> <h

Vuejs2 使用引导Vue为b表中的b输入进行Vue数据绑定

我试图将数据绑定到b表中的b输入,但是,对输入值的更改不会传播到表中的项 以下是我目前的代码: {{header}} 导出默认值{ 道具:[“标题”、“字段”、“项目”] } 基本上,我只想在每次更改b输入的相应值时更改项的值。 但是,项永远不会改变 我做错了什么?解决方案是直接使用项目,而不是使用数据.value

Vuejs2 是否可以在没有构建器的情况下将ag网格与vue一起使用?

特别是,是否可以编译ag grid vue组件的typescript源代码,然后将其包含在常规html文件中?我发现: 下载ag grid源代码,进入packages/ag grid vue目录并执行npm安装和npm运行构建。这将把编译好的javascript模块放在dist目录中,无需构建系统即可使用 我确实需要稍微修改构建的javascript以将AgGridVue对象放入全局名称空间,因为我没有使用模块加载器 编辑: 要将AgGridVue放入全局命名空间,请添加window.AgGri

Vuejs2 如何使用nuxtjs/pwa实现后台同步?

我正试图通过@nuxt/pwa模块在Nuxtjs中使用workbox后台同步 这是我在numxt.config.js文件中的workbox属性: workbox: { importScripts : [ 'sw-background-sync.js' ] } 插件/sw background sync.js文件的内容: console.log("backsync called") workbox.routing.registerRoute

Vuejs2 Vuejs-@单击不触发方法

我只是尝试使用简单的onclick方法,但我不确定为什么这些方法不会被触发 我的按钮: <template> <div class="button"> <a long class="cancel-button" @click="cancelOnClick" >Cancel</a> <a

Vuejs2 使用keyup.enter.prevent单击输入仍将提交表单

在@vue/cli 4.1.1应用程序中,我使用引导vue,并且我有一个带有两个选项卡的表单: 在第一个选项卡上,选择多个字段,然后单击任意字段上的Enter键 控件我的表单已按预期提交,但我已 第二个选项卡列出了元关键字和我想要单击的单输入控件 在这个控件上 v-on:keyup.enter.prevent="addMetaKeyword()" 运行更新方法,但未提交表单,但在提交表单时失败。 我喜欢: <template> <b-card class="backe

Vuejs2 Vue.js:如何跨3列进行路由

我正在尝试设置一个类似以下内容的页面: ======================================================================== + Nav + Items + Individual Item + +---------------+---------------+--------------------------------------+

Vuejs2 替换v-data-table的默认标题的内容

我有一个Vue应用程序正在使用Vuetify 2.xv-data-table组件。v-data-table组件中有一个已定义插槽的模板:header。模板中还有另一个自定义的插槽 向上箭头 {{header.text}} 这是组件呈现的标记: 话题 当前间隔 区间基准 添加日期 为什么自定义槽hdrCheckbox的内容在thead标记之外呈现?这就是v-data-table的工作原理 首先它可能会感到奇怪,但覆盖v-data-table的标题槽并不会取代默认的标题内容。您需要使用h

Vuejs2:为ENTER键重新发送事件

在自定义组件中时,我可以作为@click=“$emit('click')重新发出单击事件。稍后在父组件中,我可以直接对@click作出反应,而无需创建自定义事件: <!-- In the Parent --> <custom-component @click="myReaction" ... /> 如何重新发出@keyup的事件,以便我可以通过父级中的@keyup.ENTER=“myReaction”专门监听ENTER?应该是@keyup=“$e

Vuejs2 在VueJS中平滑设置v-show动画

我试图在Vuejs中使用transition为两个div设置动画。下面是我使用的代码(JSFIDLE)。但我不知道为什么它不起作用 vue 首先。。您正在导入Vue 1。 如果导入Vue 2,则此html有效 <div id="vue-instance"> <div> <transition name="fade"> <div v-if="show" key="yellow"> <div class=

Vuejs2 在Vue中-如何触发广播以拾取不同控件中的事件?

我有一个步骤组件,当我单击next按钮时,我需要在我的步骤组件中触发一个事件 此事件应由另一个组件拾取,该组件表示当前步骤中的页面内容 这就是我尝试过的: 步骤组件模板: 我在步骤模板中(在“下一步”按钮上)单击“下一步”,称之为 从console.log中,我看到click事件被执行,$emit调用不会触发任何错误,因此在这一点上它似乎工作正常 摘要部分 摘要组件是“步骤”中的组件之一,由步骤模板中的此条目加载: <component :is="stepPage"></com

Vuejs2 此方法与创建的方法之间有什么不同?

这个变量在方法和created之间有什么区别 如果我想在方法的handleCurrentChange中更改全局变量personas、api、total,那么我必须保存上下文 但是为什么我可以直接在created中使用它呢 var vue = new Vue({ el: "#app", personas: {}, apis: {}, total: '', methods: { submitFor

使用vuejs2调用jspdf

如何使用vuejs调用jsPDF javascript var doc = new jsPDF(); var specialElementHandlers = { '#editor': function (element, renderer) { return true; } }; 首先,您可以为js pdf创建自定义指令(Vue.directive) 例如 现在,您可以将此文件包括在index.html文件中,还可以包括jsPDF库 <script src="htt

Vuejs2 使用Vue.js在Konva.js中渲染图像可以在桌面浏览器中正常工作,但在IOS Chrome或Safari中则不行

我有一个特别的问题,我希望有人能指出我做得不对。我的原始代码发布在这里: 现在的情况是,我正在使用Konva成功地显示一张图像(请参见代码),但是,当我尝试使用移动IOS Chrome或Safari查看同一页面时,没有显示任何内容。它在桌面OSX Chrome和Safari上运行良好,但在移动版本上不起作用。我只是得到一个空白区域,通常我会在OSX浏览器上看到图像。我相信我可能错过了一步。此外,OSX浏览器上另一个有趣的问题是,当我打开页面以显示图像时,最初它是空白的,直到我刷新页面,然后它才显

vuejs2通过axios应用商店返回用户列表

如何返回所有用户的列表,以便将其列在表中 Axios运行良好,其一个版本可以很好地恢复单个用户。我认为出于某种原因,它返回了一个空数组 allUsers ({commit, state}) { if (!state.idToken) { return } globalAxios.get('/users.json') .then(res => { const data = res.data const allUsers = []

Vuejs2 如何更新vue的所有属性';观察员';另一个';观察员';

我有两个具有相同键值的vue“observer”数据a和b,我需要将b的值替换为a的值。如果b的值包含一个复杂对象,我希望这个复杂对象是a的值。深度拷贝替换。我有一些想法:this.someObject=Object.assign({},this.someObject,{a:1,b:2}),但随后someObject变得不可观察。你有什么好方法吗?多谢各位 我会坚持使用Object.assign()。您应该能够轻松地管理观察者。最简单的解决方案是在组件的根目录下没有someObject。为so

Vuejs2 自定义vuetify文本字段并选择

我试图用v-selecy自定义v-text-field,但遇到了一些问题 我已经成功地定制了v-text-field——更改了字体、margines、madding等,效果很好,但当我跳入v-select时,它并不像看上去那么容易 以下是v-select组件的代码: <template> <v-select class="header-multi-select" label="Chips" hid

Vuejs2 Vue组件未完全渲染

我正在尝试在Vue.js应用程序中使用一个Material Design Lite模板 发生的情况是,当我被路由(使用this.$router.push('/templateX')到下一页时,组件没有完全呈现(我只能看到标题) 真正有趣的是,当我查看浏览器控制台内的源代码部分时,我可以看到模板已加载但未完全呈现 一旦我重新加载页面,就会呈现整个模板,所有内容都按预期显示。 我认为问题出在组件的生命周期中,但我不确定该怎么办。有什么想法吗?有错误或警告吗?您在Vue路由器中处于哈希模式或历史模式吗

Vuejs2 如何使用vue选择库在vue选择字段中显示多个标签

我在html表单中使用vue选择库中的vue选择组件,如下所示,我想在标签中显示三个值,但不知道如何实现。我在文档中找不到任何解决方案 我想在标签中显示三个值,如下所示 <v-select id="selected_item" name="selected_item" title="Select an item" :options="formfieldsdata.items" :reduce="item_name => item_name.id" label="item_na

Vuejs2 Nuxt:页面重新加载时页面崩溃

有人知道为什么用户重新加载页面时子页面会崩溃吗?当您使用nuxt link从另一个使用route params的页面导航到该页面时,这是正常的,但是当用户重新加载/刷新该页面时,它将崩溃 这是我的沙箱,您可以在其中进行测试: nuxt链接中的代码: 照片详细信息页面中的代码: -> {{photo.title} 从'@recogito/Annotorious'导入{Annotorious} 导出默认值{ 资料{ 返回{ 照片:{}, 安诺:{}, 标题:this.$route.params.ti

Vuejs2 如何将elemen ui(现在称为elemen plus)添加到Vue3项目?

我一直在使用“element ui”,现在开始使用Vue3的新版本。 似乎他们发布了一个名为“element plus”的新版本,但教程没有更新 import Vue from 'vue'; // not working in Vue3 import ElementUI from 'element-plus'; import 'element-ui/lib/theme-chalk/index.css'; ... Vue.use(ElementUI); // no "Vue&quo

Vuejs2 使用可选参数/可选道具创建组件

我正在尝试创建我自己的第一个组件,并希望有一个简单的解决方案如何创建可选参数,所以我指的是可以使用但不需要使用的参数 我可以决定使用哪一种 <my component :name="name" :description="description"> 或者仅仅 <my component :name="name"> 因此,在我看来,我只想定期导入组件“我的组件”。 我的组件应该是什么样子 我试过这样的方

vuejs2:如何将vuex存储传递给vue路由器组件

如果未使用vue路由器,则在声明new vue() 但是我同时使用了vue路由器和vuex。在这种情况下,如何使存储可用于组件。例如,mystore.js是典型的: import Vue from 'vue' import Vuex from 'vuex' import jwt_decode from 'jwt-decode' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(Vuex); Vue.use(Vu

Vuejs2 如何将pug变量传递到vue动态属性?

问题是,如果动态Pug变量是“字符串”类型的,我无法通过属性将它们传递给Vue组件。Vue将尝试传递的字符串视为Vue属性的名称 问题 哈巴狗 *MyComponent.Vue* export default { name: 'MyComponent', props: { name: { type: String } } } 我得到一个错误:“属性或方法“John”未在实例上定义,但在渲染期间被引用。”,这意味着,据我所知,Vue将pugVaria

Vuejs2 Vuetables2如何向vue客户端表中的特定数据添加动态样式

我正在处理vue js和vue客户端表。我创建了一个vue客户机表,并将一些虚拟数据填充为静态数据 现在有一个列名称状态,它有两个值,即活动或不活动 我想将“非活动”的字体颜色更改为红色。 (表示链路已断开) 我需要帮助来理解它 以下我已附上我的代码: Headings : [ 'APPLICATION NAME', 'URL','LAST ACCESSED','STATUS'], tableData: [ { "APPLICATION NAME

Vuejs2 每个应用程序安装的Vue本地配置文件

我是Vue.js的新手,我正在尝试应用程序的第一步。因此,为了理解基础知识,我希望每个应用程序安装一个本地配置文件,以自定义代码中所需的一些变量 因此,在main.js中,我尝试了以下方法: import Vue from 'vue' import App from './App.vue' let config; try { config = require('../config.json'); } catch (e) { config = require('../public/co

Vuejs2 Vuejs检测更改并在没有用户的情况下更新页面';参与

我已经有了VueJS单页应用程序(SPA),当用户在我的应用程序中成功注册时,它会将他们重定向到主页。此主页显示一个栏(警报),要求用户确认他们在注册期间提供的电子邮件注意:我们将不断显示此栏,直到他们确认 当前,当用户确认电子邮件时,会在一个新选项卡中打开确认页面,说明电子邮件已成功确认和条形图消失,但当用户转到原始选项卡(主页)时,条形图仍会显示 您是否可以在后台监听用户状态的更改(user.isVerified),并在没有用户参与的情况下隐藏该条(刷新页面/单击任何链接) 要获取用户数据,

  1    2   3   4   5   6  ... 下一页 最后一页 共 20 页