Vue.js Vue路由器-重定向时未获取API数据

我正在使用JWT登录构建一个应用程序,我检查用户是否在访问/时登录,然后重定向到仪表板: let routes = [ { path: '', component: Login, beforeEnter(to, from, next) { if (auth.loggedIn()) { next({ path: '/dashboard' }); } else {

Vue.js VueJS和Laravel-post请求始终为空

我正在尝试使用VueJS2(使用axios)和Laravel5.3制作一篇简单的文章。当我尝试打印$request->all()时,我的方法总是返回一个空数组 我的刀片模板中有以下元标记: <meta name="csrf-token" content="{{ csrf_token() }}"> 这是我的Vue组件(为了清晰起见缩小了范围): 保存结果 导出默认值{ 方法:{ saveResult:function(){ post('/api/user/save results'

Vue.js仅通过一个请求就观察了两次数据变化

请看我的密码。我只设置了app.form=object一次,为什么有两个值被改变了 首先,它从“20”变为“20”,这是我所期望的,但突然它从20变为未定义 代码对ajax请求进行了修改,并直接设置了值 刚才发生了什么?没有设置变量值的选项。无法同步选择对象以显示值,因此它会将值还原为未定义 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title><

Vue.js 如何将变量插入Vue中的嵌套组件中?

我有一个内置组件的应用程序。在筛选器id上调用应用程序。我有一个名为MinTotalSpunt的数据元素。目前,该应用程序中包含“3”。页面上的第一个位置将正确显示。但是,当我尝试将其作为变量传递到vue slider中时,它不喜欢它,并向律师发出“无效表达式”警告,并且不遵守最小值 <div id="filter"> <form id="search"> Search <input name="query" v-model="searchQuery"&

访问数据时返回未定义的Vue.js方法

我正在使用Vue.js填充位置列表,并使用一种方法,该方法应使用地址返回格式化的地图链接 问题是,在方法中,试图返回此.Address的结果是未定义。以下是我得到的: // the Vue model pbrplApp = new Vue({ el: '#pbrpl-locations', data: { 'success' : 0, 'errorResponse' : '', 'wsdlLastResponse' : '',

Vue.js 当窗口处于活动状态时,如何在Vue中执行函数?

Vue.js已经挂载、创建、更新等。我可以在第一次加载页面时执行函数,但是我如何执行,例如console.log'hi';每当用户在不重新加载整个应用程序的情况下导航到特定页面/路线时?Vue router会公开生命周期挂钩,您可以在其中执行代码: 如果您需要在每次路线导航时执行代码,则beforeach是一种方法 或者,您可以在主包装器组件中查看当前路由,并在watcher:部分中执行代码,以响应参数更改 watch: { '$route' (to, from) { //

Vue.js 路由器链路替换为vue路由器?

使用vue路由器的路由器链接标签,“设置替换道具将在单击时调用router.replace(),而不是router.push(),因此导航将不会留下历史记录”,根据文档。但这似乎并没有发生在我身上,所以我想我一定是误解了什么。我的SPA中有一个导航菜单,每个菜单项中的路由器链接都有一个替换道具。然而,当我依次单击每个菜单项时,它显然会添加到历史记录中,因为“后退”按钮会将我带回到上一项,我可以在Firefox历史记录中看到添加到的URL列表。我做错了什么?在组件“历史记录”中使用Go,单击“Go

Vue.js 按属性从dom中选择v-for项的最简单方法?

我正在呈现一个交易列表,如下所示: <deal :deal="deal" v-for="(deal, index) in deals" :key="index" ref="deals" @click.native="setScrollLocation(deal.id)"> </deal> 现在我有了一些东西,可以使用document.querySelector来查询,比如this.$el.querySelector 我不喜

Vue.js 通过计算属性更新Vuex状态更改组件

我正在使用Vue和Vuex构建一个简单的电影应用程序,希望能够在单击按钮时将电影添加到收藏夹列表中。我正在将电影添加到商店,但我希望在添加电影后,按钮上的文本从“添加到收藏夹”更改为“从收藏夹中删除”。我正在使用计算属性读取Vuex存储,以根据电影是否在存储的收藏夹列表中来确定按钮上的文本。如果我重新加载页面,按钮上的文本将正确更改,但我无法在单击按钮添加/删除电影时获得要更改的文本。如何在Vuex存储区发生更改时重新计算计算的属性 以下是我的电影组件: {{movie.title} 评级:

Vue.js 在vue js中声明单个项

我有以下表格项目。这里是布局图 <grid-item v-for="item in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i"> {{item.i}} </grid-item> 现在我想改变布局如下 layout = { pnlProject: { "x": 0, "y": 0, "w": 1, "h": 1, "i": "0" }, p

Vue.js 数据加载在初始加载时失败,但在后续加载时工作

它在控制台中显示了我期望的JSON,但它不会改变UI。它仍然会给出未定义的数据错误 更新2 现在,我得到了。它在初始负载和后续负载上也会失败 编辑 您的问题在于异步加载。您正在对db.collection进行异步调用,但在进行db.collection调用后在viewModel中更新this.page。这就是为什么你的this.page没有以你希望更新的数据结束。试试这个&我想它会有用的: fetchData () { console.log("Getting conte

Vue.js v代表循环输出基本数字

我有一个数据叫做pageCount,它只是一个数字 我试图为每一页输出一个带有循环数的按钮,但是下面的“使用未定义常量n”失败 {{n} 为什么?您是否在on数据键中声明了页面计数 //HTML {{n}} //Javascript var vm=新的Vue({ el:“根”, 数据:{ 页面计数:[1,2,3,4,5,6] } }) 我不确定您使用的v-for是什么如果pageCount是一个整数,如果您只需要pageCount,那么您只需执行以下操作: <button>{{

Vue.js 在quasar框架中选择datatable行上隐藏按钮

我正在使用quasar framework datatable组件来隐藏标题 并在选择至少一行时添加按钮 我有下表: 选择“行”时,会发生这种情况: 我还想隐藏上面的添加按钮,请参见下面的代码 <template> <!-- Table settings --> <q-table :title="tableTitle" :data="tableData" :columns="tableThs" :selection="selecti

Vue.js Vue JS出生日期选择器

我正在设置出生日期字段。 如何将“年”设置为第一个弹出窗口?而不是日历视图弹出窗口 我使用的视图包是“vue2日期选择器” 我想先选择“年”,然后选择“月”,再选择“日期” 这是我希望在单击日历图标时首先显示的内容。 此时,当我单击日历图标时,它将显示默认日历 这是我目前掌握的密码。使用默认日历可以很好地工作,但我只想先默认选择年份,然后选择月份,然后选择日期 <template> <div class="styled-form__field">

Vue.js 在nuxt.JS组件文件中拆分模板、脚本和样式(HTML、JS和CSS)

将nuxt.js视图、组件(和布局)拆分为单独文件(在设计时,而不是在构建后)的最佳方式是什么?对于复杂的大视图和组件,当我需要在模板和脚本之间切换(查找某些内容等)时,我发现这非常烦人 理想情况下,我能够定义: - foo.vue.html - foo.vue.js - foo.vue.css 让构建/生成过程完成其余的工作。我使用的是预渲染SPA的生成(nuxt generate),因此,如果有解决方案,则该解决方案必须兼容。您需要像vue中描述的那样手动执行此操作 这将是预编译的 您需

Vue.js weex数据更改以更新到子组件 module.exports={ 数据:{ 视图信息:{ 属性0:value0, 属性1:值1 } }, 挂载:函数(){ getDataFromServer(); }, 方法:{ getDataFromServer:函数(){ var me=这个; var httpRequest=Service.getViewInfo(); httpRequest.on(“成功”,函数(数据){ me.viewInfo.attr2=data.info.attr2; me.viewInfo.attr3=data.info.attr3; me.viewInfo.attr4=data.info.attr4; }); httpRequest.send(); } } }

topView.vue <template> <topView viewInfo="cardInfo"></topView> <bottomView viewInfo="cardInfo"></bottomView> <template> <script> module.exports = { data: { viewInfo:{

Vue.js Nuxt和Ag网格问题语法错误缺少堆栈帧

正在尝试在nuxt应用程序中添加ag网格 我从楼梯上走下来 和 在nuxt.config.js中添加了样式 制作插件并包含在nuxt.config.js中 已创建组件aggridemo.vue 在page index.vue中包含组件 注意:请不要尝试运行这些代码段,因为我只使用它们来共享我拥有的源代码 我的nuxt.config.js文件 需要'dotenv'.config 从“./package”导入包 导出默认值{ 模式:“通用”, /* **页眉 */ 负责人:{ 标题:pkg.na

Vue.js 类绑定中需要反勾选(`)?

当我将class属性绑定到Vuetify的v-chip时,我必须使用backtick: {{project.status} 但是如果我使用下面的代码,为什么会显示错误 {{project.status} 这在任何Vue版本中都是无效语法: <v-chip small :class="{{project.status}} "> 此语法已在Vue 2中删除 它应该是: <v-chip small :class="`${project.status}`"> 或:

Vue.js 如何正确设置元素UI表行中的链接(应该很容易?)

我在元素UI中得到了一个包含用户项目的表。由于元素UI不能与一起使用,我有点困惑,不知该如何处理。该表的目的是显示用户的项目并对其执行基本CRUD操作。这意味着对于每一行,都应该显示一个唯一的ID作为名称,对于操作,它们应该允许用户使用唯一ID编辑/删除该特定项目。在普通HTML表中,我希望它如下所示: <table class="table table-hover"> <thead class="table-header">

Vue.js 如何将数据表迭代到vutify中?

我想在vuetify板上迭代我的安排,但我还没有找到逻辑,因为我从vue开始,如果有人能给我一个如何迭代vutify板的例子,那就太完美了 例如: <article class="artkccle-item" v-for="person in persons" :key="person.id"> <v-data-table :headers="headers" :items-per-page="5" class="elevation-1"> <v-i

Vue.js 如果url Vue中有查询参数,则自动显示模式

是否有一种方法可以通过首先计算参数的URL来自动打开模式 例如: 使用URL:example.com访问网站的访问者看不到模式。他们只看到常规站点 URL为example.com?token=abcd123或example.com/token=abcd123的网站访问者可以看到常规的example.com网站,但在页面加载时,网站顶部有一个特殊模式 如何使用vue执行此操作?如果您使用的是vue路由器,则可以从路由对象中提取参数 console.logthis.$route.query.toke

Vue.js Ag网格-事件和方法(Vuejs)

我无法使用save方法保存对表数据的更改 我正在使用cellValueChanged方法编辑和保存表格单元格 <ag-grid-vue :cellValueChanged="save"></ag-grid-vue> methods: { save() { const method = this.instituicao.id ? 'put' : 'post' const id = this.instituicao.id ? `/${

Vue.js Vue JS中的错误处理-未捕获错误

我有以下代码: fooService.update(this.bar).then( this.$emit('updated', this.updatedBar),).catch(err => {... 如果遇到错误,则不会捕获该错误。如果我将代码更改为: fooService.update(this.bar).then(x => {this.$emit('updated', this.updatedBar);}).catch(err => {... 然后捕获错误并按预期显示

Vue.js 在编辑模式下按_id跟踪时未选择vue multiselect

我正在使用Vue multi-select,模型作为类别,选项作为类别列表 categories: ["5ddc465a46a56b19d17e9a15"], categoriesList: [ { "_id": "5ddc465a46a56b19d17e9a15", "name": "Business Card", } ] multiselect v-model="categories" class="form-control" tag-placeholder="Add this as n

Vue.js 使用$router.push()时,如何在params中传递对象?

我想在一个对象数组中循环,当我单击一个项目时,我想显示一个页面,其中填充了来自另一个组件的数据 这是我的路由器.js { path: '/artists', component: () => import('../views/Artists/ArtistsStart.vue'), children: [ { path: '', component: () => import('../views/Artists/Art

Vue.js 如何解决v-switch vuetify仅以一种方式绑定?

vuetify的v型开关只有一种绑定方式。 如果我加载数据,它会打开或关闭。因此,如果我在v型开关的v型模型中加载数据,它就会工作。 但如果我打开v型开关,它会关闭,但不会改变任何东西 代码如下: {{item.name} 编辑 导出默认值{ 资料{ 返回{ 选项卡:[ “内容类型” ], 选项卡:空, 数据表:{ 项目:[], 标题:[{ 文本:“内容类型”,值:名称 }] }, 设置:空, 在菜单:{}, } }, 安装{ 这个.$axios.get'/settings.json'。然后{d

Vue.js 如何在生成后正确部署Vue应用程序?

我在一个托管平台上部署了一个Vue应用程序,我知道如果我提供 “www.mydomain.com/about”点击回车键,我得到404错误页面。我部署错东西了吗 npm运行构建 注意:dist文件夹是在生成后部署的 但是,当您删除/about时,真正的页面得到了服务,而且当您单击导航栏上的链接时,它会显示about页面。但是当你刷新页面时,它返回404错误 为什么会这样?您需要配置服务器,因为您是使用服务器而不是vue解析路由(当您单击导航栏并转到/about时,您可以访问,因为您是使用vue

Vue.js 在生产模式下压缩vuetify的大小

我有一个生产模式后的项目app.js的大小是2.35 MB,在生产模式下太大了,它应该是KB?您可以根据文档检查在生产模式下是否有true,这是webpack配置中最小化的默认值: Upd 您可以尝试检查css文件是否从js包中提取。从这里开始: 可能是因为JS文件中有CSS包,您可以试试 build.extractCSS:true在Nuxt选项中,它将分离Vuetify JS& CSS。CSS在默认情况下有点大,但在使用 gzip正在生产中 怎样我的申请是SPA@ziakhan,我已经更新了我

Vue.js 如何使用vue js使模态从一端移动到另一端

在vue.js中有这样的代码,我的任务是使模式从一端移动到另一端,这是我的代码,为此使用了引导模式,包括:draggable <b-modal ref="my-modal" hide-footer title="Edit Record"> <div class="card"> <div class="card-header d-flex justify-content-between"> <div clas

将值传递给存储getters Vue.js

我试图将ID作为参数传递给存储getter,但当我控制台该ID时,我得到了未定义的ID。 有人能帮我吗 这是我的密码: 这就是我对getter的称呼: this.$store.getters['users/list']('users', '123') 这是getter函数: getters: { list: (state, getters, rootState, rootGetters, userId) => (key) => { console.log(use

如何在Vue.js中使用zingchart映射模块?

我正在中搜索,但未找到任何将“地图”模块用于的示例 实际上,我使用的是Nuxt,但我认为它是相同的…我们已经在zingchart vue repo中更新了自述文件,说明如何解决该问题 ZingChart与常用图表类型(如直线、柱、饼图和散点)捆绑在一起。对于其他图表类型,您需要导入其他模块文件 例如,将深度图添加到vue组件将需要额外的导入。注意,必须从zingchart包中的modules-es6目录导入 导入'zingchart/modules-es6/zingchart depth.mi

Vue.js 带有vue dragscroll的nuxt:未定义窗口

我正在尝试将vue-dragscroll与nuxtjs一起使用 我不熟悉nuxtjs,以前我一直在使用vue-dragscroll常规vuejs 我发现一个错误窗口未定义,我查看了vue dragscroll文档,仍然找不到解决方案 这就是我如何实现vue dragscroll的 <template lang="pug"> div CountriesSearch.mb-2 div#countryList(v-for="country in countries"

Vue.js 是否可以在VueJS中传递被动属性?

我从另一个开发人员那里接管了一段代码。他使用Vuex属性轮询来初始化一些组件。我想使用一种不同的方法——在上层获取对象,并将其作为属性传递给组件的下游。对象以异步方法从后端获取。我认为Vue反应性稍后将初始化实际值。但我有一个错误: [Vue warn]: Property or method "poll" is not defined on the instance but referenced during render. Make sure that this property is re

Vue.js 在JavaScript文件中导入Vue路由器会导致“模块解析失败”错误

我试图访问axios拦截器中的路由器,但当我将该文件导入.js axios文件时,错误模块解析失败:意外令牌1:0 您可能需要适当的加载程序来处理此文件类型,目前没有配置加载程序来处理此文件。看见https://webpack.js.org/conceptsloaders >发生 以下是router.js文件的示例: import Vue from "vue"; import Router from "vue-router"; Vue.use(Router); const router =

Vue.js 删除(或隐藏)选中Quasar中的所有复选框表格组件

我使用的是quasar,我添加了一个具有多个选项的表,如下图所示: 问题是我找不到一种方法来隐藏标题中选择表中所有选项的复选框 这是我使用的代码: <q-table flat title="Please select ETF to compare" :data="etf_comp" :columns="columns_compare_etf" row-key="name" :selected-rows-label="getSelectedString" selection="multi

Vue.js 在vue js中构建过程中显示自定义页面

我想在构建vue js项目时显示一个自定义html页面(npm run build) 正如您所知,在构建过程中,dist文件夹不存在,而在构建过程之后,我们有dist文件夹。 在build完成之前,如何显示自定义页面? 我在一个论坛上找到了这个答案,但我如何使用它呢? 我不认为这是正确的方式 axios.interceptors.response.use(function (response) { if ( response.status === 503 ) { retu

Vue.js Hot我可以使用LocalFower的退货吗

在我的Vue SPA中,我使用localfollow来存储承载令牌 在组件中,我需要令牌将文件上载到api 我试图获取LocalFower令牌: let token = localforage.getItem('authtoken') console.log(token) 它可以工作,但结果是一个承诺对象: Promise result: "eyJ0eXAiOiJKV1QiyuIiwiaWF0IjoxNTg4MTUzMTkzLCJleHAiOj

Vue.js 在管线更改期间显示组件

是否有一种方法可以在路线更改期间显示组件 当用户打开页面时,beforeach()方法检查用户是否已通过身份验证。这个过程可能需要一些时间。在此期间,屏幕为空白 当beforeach()方法执行该操作时,是否有方法渲染组件 或者,当beforeach() 我的App.vue如下所示: 导出默认值{}; #应用程序{ /*确保应用程序始终100%减少可用空间*/ 身高:100%; } 您可以尝试以下方法: App.vue: .loader组件{ 位置:固定; 排名:0; 左:0; 宽度:10

Vue.js 如何为Google PageSpeed insights改进Nuxt.js支持的站点

我有一个用Nuxt.js构建的网站正在开发中 它的工作原理非常好,但是由于第一次加载需要几秒钟的时间,而且是一个空白页面,所以Google PageSpeed insights对于移动设备来说非常糟糕 测试网站: 他们声称最初的痛苦内容需要10秒或更长时间 我很确定这与VueX的加载有关。所以 我想知道是否有一种方法可以加快速度,或者至少在加载时在白色页面中添加一些内容 非常感谢 只需浏览一下你的网站,它就能很好地显示出它在哪里花费时间。我刚刚注意到: 多次加载jquery(为什么首先要使用v

Vue.js 未在跨距中换行的转换组

我正在尝试将转换应用到Vuetify v-data-table,以便在我删除表格中的tbody时,它会逐渐消失,而不是消失在屏幕上。如果我将tbody包装在过渡组中,tbody将按预期淡出。然而,它被包装在一个span标记中,这意味着tbody中的所有列都被推到我表的第一列中 我知道我可以指定不同于跨度的标记,但它们都会导致我的表布局中断。如何将淡入淡出过渡应用到tbody并保持表格布局 <v-data-table ref="dataTable" :headers="

Vue.js Vue-如何使用404响应代码创建404错误页面

如何在Vue中使用404响应代码创建404错误页?这是404的路线 { path: "*", name: "404", component: load("404"), alias: "/404" } 您将无法在单页应用程序中设置HTTP状态代码-所有路由都在浏览器的同一页上完成,因此一旦加载该页,将不会再收到HTTP状态代码 但是,如果您试图通过直接在浏览器的地址栏中键入/复制URL来加载不存在的路由,那么您可以使用nginX(或您正在使用的任何服务器软件)

Vue.js 如何在VUEX存储区的v-select中显示嵌套数据

我有两个v-select下拉列表(国家和州),可以用数据库中的数据填充。例如,我试图从第一个v-select下拉列表中选择一个国家(加拿大),我希望第二个v-select仅显示加拿大的州。我正在使用VUEX STORE从我的Laravel后端API获取数据 // VUEX STORE import Axios from "axios"; export default { namespaced: true, //*******STATE*******// state: { countri

Vue.js 如果组件在Nativescript Vue中处于非活动状态,如何停止代码执行

我的应用程序应该每5秒发送一次关于设备的数据,但是如果我最小化应用程序并重新打开它,或者如果我只是返回页面并返回,代码甚至会在后台继续运行。当我再次打开应用程序时,发送数据的功能叠加在已经工作的功能上,数据离开的频率是原来的两倍,因此您可以无限期地创建一个函数 如何解决这个问题 我的方法: sendDeviceInfo(){ console.log("1111"); axios.post('', {

Vue.js 如何使所有资源本地化?

我用Nuxt.js和Vuetify插件做web应用 它应该在没有互联网的情况下工作。现在我下载css和字体时出错: 如何使所有资源都成为本地资源?这是一个有效的问题,不知道为什么评论中会有其他的表述,只是表述得不太清楚。他询问如何在本地加载字体和css。 Vuetify将自动尝试从CDN获取字体和图标(如果单击请求并检查请求URL,您将看到这些字体和图标)。 您必须从NPM本地安装图标和字体。 以下是如何在本地安装图标 安装图标: npm安装材料设计图标 在nuxt.config.js中 全局

Vue.js 如何在vue指令中附加事件?

我需要使用指令将函数附加到元素。 我想用Vue方法$on来实现,但它不起作用。 当我使用addEventListener执行此操作时,event.target.value在第一次输入后为我提供未更改的值,第二次输入正确。 如何修复它 例如: 我同意Bert的观点,您不应该试图通过指令来调整Vue对象。另一方面,您应该能够设置事件处理程序。在事件处理程序中,event.target.value没有更新的值。这似乎与您还通过Vue附加了一个输入处理程序有关。当我删除@input=“setDirty”

Vue.js 将Vue方法拆分为多个文件?

目前,我有一个文件,其中我正在根据路由参数有条件地渲染内容。我打算使用9个不同的参数来呈现9组不同的信息/特征 目前,我只在这个单一的文件中实现了这些特性中的一组,并且该文件非常大,主要是由于方法部分 在Vue(使用webpack)中,将一个文档拆分为多个文档的最佳方法是什么,而不必做大量编辑工作来保持功能 这是文档的当前结构: <template> <div class='container' v-if="id=='exampleparam'"></div&g

如何在Vue.js中获取事件信息?

我正在尝试使用Vue Devtools调试我的应用程序,我想知道如何检索事件后看到的信息 <l-marker v-for="marker in markers" :lat-lng="marker.position" :key="marker.id" :draggable=true @dragend="dragend"> </l-marker&g

Vue.js [Vue warn]:未知的自定义元素:

我目前在一个基于Vuepress的静态网站上工作。我在.md文件中注册Vue组件时出现了一个错误 [Vue warn]: Unknown custom element: <v-b86f6654149c6> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <Page>

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