我是Vue新手,我尝试做一个小PoC,但不知道为什么,我遇到了一个错误:未捕获的TypeError:无法读取未定义的属性“get”
我的html:
<div id="configuration">
....
<div class="list-group config-list">
<a
v-for="item in configurationList"
v-on:click="SelectIte
我正在尝试使用VueJS2(使用axios)和Laravel5.3制作一篇简单的文章。当我尝试打印$request->all()时,我的方法总是返回一个空数组
我的刀片模板中有以下元标记:
<meta name="csrf-token" content="{{ csrf_token() }}">
这是我的Vue组件(为了清晰起见缩小了范围):
保存结果
导出默认值{
方法:{
saveResult:function(){
post('/api/user/save results'
Vue.js已经挂载、创建、更新等。我可以在第一次加载页面时执行函数,但是我如何执行,例如console.log'hi';每当用户在不重新加载整个应用程序的情况下导航到特定页面/路线时?Vue router会公开生命周期挂钩,您可以在其中执行代码:
如果您需要在每次路线导航时执行代码,则beforeach是一种方法
或者,您可以在主包装器组件中查看当前路由,并在watcher:部分中执行代码,以响应参数更改
watch: {
'$route' (to, from) {
//
使用vue路由器的路由器链接标签,“设置替换道具将在单击时调用router.replace(),而不是router.push(),因此导航将不会留下历史记录”,根据文档。但这似乎并没有发生在我身上,所以我想我一定是误解了什么。我的SPA中有一个导航菜单,每个菜单项中的路由器链接都有一个替换道具。然而,当我依次单击每个菜单项时,它显然会添加到历史记录中,因为“后退”按钮会将我带回到上一项,我可以在Firefox历史记录中看到添加到的URL列表。我做错了什么?在组件“历史记录”中使用Go,单击“Go
我正在使用Vue和Vuex构建一个简单的电影应用程序,希望能够在单击按钮时将电影添加到收藏夹列表中。我正在将电影添加到商店,但我希望在添加电影后,按钮上的文本从“添加到收藏夹”更改为“从收藏夹中删除”。我正在使用计算属性读取Vuex存储,以根据电影是否在存储的收藏夹列表中来确定按钮上的文本。如果我重新加载页面,按钮上的文本将正确更改,但我无法在单击按钮添加/删除电影时获得要更改的文本。如何在Vuex存储区发生更改时重新计算计算的属性
以下是我的电影组件:
{{movie.title}
评级:
在select上添加新事件时,FullCalendar似乎正在更改事件的开始和结束时间。这仅在月视图中发生,而不在agendaWeek视图中发生
mounted () {
let vm = this
$(this.$refs.calendar).fullCalendar({
defaultView: 'month',
header: {
left: 'title',
center: '',
right: 'today agendaWee
我有一个数据叫做pageCount,它只是一个数字
我试图为每一页输出一个带有循环数的按钮,但是下面的“使用未定义常量n”失败
{{n}
为什么?您是否在on数据键中声明了页面计数
//HTML
{{n}}
//Javascript
var vm=新的Vue({
el:“根”,
数据:{
页面计数:[1,2,3,4,5,6]
}
})
我不确定您使用的v-for是什么如果pageCount是一个整数,如果您只需要pageCount,那么您只需执行以下操作:
<button>{{
我正在设置出生日期字段。
如何将“年”设置为第一个弹出窗口?而不是日历视图弹出窗口
我使用的视图包是“vue2日期选择器”
我想先选择“年”,然后选择“月”,再选择“日期”
这是我希望在单击日历图标时首先显示的内容。
此时,当我单击日历图标时,它将显示默认日历
这是我目前掌握的密码。使用默认日历可以很好地工作,但我只想先默认选择年份,然后选择月份,然后选择日期
<template>
<div class="styled-form__field">
将nuxt.js视图、组件(和布局)拆分为单独文件(在设计时,而不是在构建后)的最佳方式是什么?对于复杂的大视图和组件,当我需要在模板和脚本之间切换(查找某些内容等)时,我发现这非常烦人
理想情况下,我能够定义:
- foo.vue.html
- foo.vue.js
- foo.vue.css
让构建/生成过程完成其余的工作。我使用的是预渲染SPA的生成(nuxt generate),因此,如果有解决方案,则该解决方案必须兼容。您需要像vue中描述的那样手动执行此操作
这将是预编译的
您需
正在尝试在nuxt应用程序中添加ag网格
我从楼梯上走下来
和
在nuxt.config.js中添加了样式
制作插件并包含在nuxt.config.js中
已创建组件aggridemo.vue
在page index.vue中包含组件
注意:请不要尝试运行这些代码段,因为我只使用它们来共享我拥有的源代码
我的nuxt.config.js文件
需要'dotenv'.config
从“./package”导入包
导出默认值{
模式:“通用”,
/*
**页眉
*/
负责人:{
标题:pkg.na
当我将class属性绑定到Vuetify的v-chip时,我必须使用backtick:
{{project.status}
但是如果我使用下面的代码,为什么会显示错误
{{project.status}
这在任何Vue版本中都是无效语法:
<v-chip small :class="{{project.status}} ">
此语法已在Vue 2中删除
它应该是:
<v-chip small :class="`${project.status}`">
或:
我想在一个对象数组中循环,当我单击一个项目时,我想显示一个页面,其中填充了来自另一个组件的数据
这是我的路由器.js
{
path: '/artists',
component: () => import('../views/Artists/ArtistsStart.vue'),
children: [
{
path: '',
component: () => import('../views/Artists/Art
我在一个托管平台上部署了一个Vue应用程序,我知道如果我提供
“www.mydomain.com/about”点击回车键,我得到404错误页面。我部署错东西了吗
npm运行构建
注意:dist文件夹是在生成后部署的
但是,当您删除/about时,真正的页面得到了服务,而且当您单击导航栏上的链接时,它会显示about页面。但是当你刷新页面时,它返回404错误
为什么会这样?您需要配置服务器,因为您是使用服务器而不是vue解析路由(当您单击导航栏并转到/about时,您可以访问,因为您是使用vue
标签: Vue.js
vuetify.jsproduction
我有一个生产模式后的项目app.js的大小是2.35 MB,在生产模式下太大了,它应该是KB?您可以根据文档检查在生产模式下是否有true,这是webpack配置中最小化的默认值:
Upd
您可以尝试检查css文件是否从js包中提取。从这里开始:
可能是因为JS文件中有CSS包,您可以试试
build.extractCSS:true在Nuxt选项中,它将分离Vuetify JS&
CSS。CSS在默认情况下有点大,但在使用
gzip正在生产中
怎样我的申请是SPA@ziakhan,我已经更新了我
我试图将ID作为参数传递给存储getter,但当我控制台该ID时,我得到了未定义的ID。
有人能帮我吗
这是我的密码:
这就是我对getter的称呼:
this.$store.getters['users/list']('users', '123')
这是getter函数:
getters: {
list: (state, getters, rootState, rootGetters, userId) => (key) => {
console.log(use
我正在中搜索,但未找到任何将“地图”模块用于的示例
实际上,我使用的是Nuxt,但我认为它是相同的…我们已经在zingchart vue repo中更新了自述文件,说明如何解决该问题
ZingChart与常用图表类型(如直线、柱、饼图和散点)捆绑在一起。对于其他图表类型,您需要导入其他模块文件
例如,将深度图添加到vue组件将需要额外的导入。注意,必须从zingchart包中的modules-es6目录导入
导入'zingchart/modules-es6/zingchart depth.mi
我正在尝试将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"
我从另一个开发人员那里接管了一段代码。他使用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项目时显示一个自定义html页面(npm run build)
正如您所知,在构建过程中,dist文件夹不存在,而在构建过程之后,我们有dist文件夹。
在build完成之前,如何显示自定义页面?
我在一个论坛上找到了这个答案,但我如何使用它呢?
我不认为这是正确的方式
axios.interceptors.response.use(function (response) {
if ( response.status === 503 ) {
retu
标签: Vue.js
vuexnuxt.jsgoogle-pagespeedpagespeed-insights
我有一个用Nuxt.js构建的网站正在开发中
它的工作原理非常好,但是由于第一次加载需要几秒钟的时间,而且是一个空白页面,所以Google PageSpeed insights对于移动设备来说非常糟糕
测试网站:
他们声称最初的痛苦内容需要10秒或更长时间
我很确定这与VueX的加载有关。所以
我想知道是否有一种方法可以加快速度,或者至少在加载时在白色页面中添加一些内容
非常感谢 只需浏览一下你的网站,它就能很好地显示出它在哪里花费时间。我刚刚注意到:
多次加载jquery(为什么首先要使用v
我正在尝试将转换应用到Vuetify v-data-table,以便在我删除表格中的tbody时,它会逐渐消失,而不是消失在屏幕上。如果我将tbody包装在过渡组中,tbody将按预期淡出。然而,它被包装在一个span标记中,这意味着tbody中的所有列都被推到我表的第一列中
我知道我可以指定不同于跨度的标记,但它们都会导致我的表布局中断。如何将淡入淡出过渡应用到tbody并保持表格布局
<v-data-table
ref="dataTable"
:headers="
如何在Vue中使用404响应代码创建404错误页?这是404的路线
{
path: "*",
name: "404",
component: load("404"),
alias: "/404"
}
您将无法在单页应用程序中设置HTTP状态代码-所有路由都在浏览器的同一页上完成,因此一旦加载该页,将不会再收到HTTP状态代码
但是,如果您试图通过直接在浏览器的地址栏中键入/复制URL来加载不存在的路由,那么您可以使用nginX(或您正在使用的任何服务器软件)
因此,我正试图思考如何使用vue加载器作为网页包,如何使用vue路由器作为路由,以及如何拥有共享数据模型。我的理解是,您创建一个数据模型,然后将其传递到每个组件,并认为它们具有共享状态。您似乎还应该使用数据模型而不是道具,因为这允许双向绑定
我试过一些方法,但似乎都不管用。我试着在路由器中传递数据,但没有解决问题
我把它作为我的主app.js:
var $ = require('jquery'),
Vue = require('vue'),
VueRouter = require
我有Tab.vue,我传递了一个Tab数据对象(链接到vue路由器)。我希望在需要时传递exact,并将此属性附加到模板(如果存在)
和在选项卡中的vue
<router-link v-for="item in tabs" :to="{ name: item.route }" item.exact?>
{{ item.text }}
</router-link>
{{item.text}
<router-link v-for="item in ta
我有一个信息框,在其中我放置了有关用户注册状态的信息(例如,使用此电子邮件的用户已注册)。我想给这些信息添加路由器链接
它是我的模板的HTML部分:
<div class="info" v-bind:class=infoClass v-html=info></div>
以及用户注册方法的一部分:
if (response.body === 'success') {
this.infoClass = 'success'
this.info = 'Suc
下面是一个非常简单的Vuejs组件,它尝试捕获跨度的单击事件:
nativeOn:{
单击:功能(事件){
警报('单击')
}
},
…这是,但它不起作用,我这里缺少什么?当您在span元素上注册事件时,您必须使用on选项,如下所示:
Vue.component('hello'{
渲染:函数(createElement){
返回createElement(“span”{
关于:{
单击:功能(事件){
警报('单击')
}
},
}“你好”)
}
})
请参阅。当您在span元素上
当我阅读Vue的指南时,它说:
Vue无法检测到对数组的以下更改,例如vm.items[indexOfItem]=newValue
但当我阅读代码时,我发现:
var Observer = function Observer(value) {
this.value = value;
this.dep = new Dep();
this.vmCount = 0;
def(value, '__ob__', this);
if (Array.isArray(va
我在使用Vue.js 2时遇到了一个奇怪的行为
我有一个组件,我在一个html页面中引用了两次。
此组件包含一个名为附件文件的输入文件控件。我使用Bootstrap类hidden隐藏它,并使用另一个按钮打开文件选择。选择文件后,我将一个名为attachment_filename的变量放入特定字符串,如下所示:
<template>
<div>
<button @click="selectAttachement"><span cla
我在VueJS项目中使用$http.delete从页面中删除用户。当我点击删除图标时,用户正在从数据库中删除它,但在前端,该用户的html仍在页面上。如果我刷新页面,将消失
整个HTML(向下)是一个用户列表中的用户,来自数据库。我尝试用另一个div包装整个HTML,并在v-if指令中使用,但在这种情况下不会显示任何用户
那么,当我删除用户时,如何在不刷新页面的情况下删除html元素呢
若有其他方法从数据库中删除用户,除了这个$http.delete之外,我可以自由地将它显示给我
HTML
在要
我有一个循环颜色数组的列表,我希望将颜色值绑定到相应名称的颜色样式。例如,INDIANRED的颜色是INDIANRED。不幸的是,文本颜色名称的样式不是我想要的颜色。谢谢你的帮助
<ul>
<li v-for="redColor in redColors">
<p v-bind:style="{ color: '{{redColor.hexcode}}' }">{{redColor.name}}</p> {{redColor.hexco
我有一个问题,商店数据“菜单”在我登录后没有更新。
表面上。。在我调用“getMenus”之前,对象“loggedInUser”不是sat。。我不确定我做错了什么
PS!在chrome中调试时,我注意到loggedInUser在输入api调用时为“null”(请参阅api.js代码片段)
Login.vue(方法):
methods: {
doLogin() {
this.errorMessage = '';
this.loading = true;
将文件名分配到上传时的输入字段,然后显示成功消息,工作正常,但当我尝试删除文件并再次上传时,它不工作
新Vue{
el:应用程序,
资料{
返回{
表格:{
信息:,
文件URL:
},
加载:错误
}
},
方法:{
上载图像事件{
this.form.fileurl='已上载!'
},
deleteFilefurl{
this.form.fileurl=
}
}
}
身体{
背景:20262E;
填充:20px;
字体系列:Helvetica;
}
应用程序{
背景:fff;
边界半径:4
我想对VUE.JS进行ajax调用,这可以由axios完成。我正在从JS文件中调用这个函数,下面是代码,我到目前为止已经尝试过了
<div id="VueCalling">
<div class="container">
<label>Please enter thought </label>
<input type="text" id="txtThought" clas
我最近将vuetify从旧版本(1.2.8)更新为新版本(1.3.2),并按顺序导入组件。它看起来像下面
import Vue from 'vue';
import Vuetify, {
VApp, // required
VNavigationDrawer,
VGrid,
VFooter,
VToolbar,
transitions
} from 'vuetify/lib'
import { Ripple } from 'vuetify/lib/directives'
我有一个输出为text/html的API。
vue向此API发出请求,并获取变量中的文本/html数据。
如何使用这些数据构建页面并将整个页面重定向到该页面
非常感谢。您应该使用v-html指令将字符串解释为html
它看起来像这样
<span v-html="someRawHtml"></span>
我不知道为什么需要重定向,但如果您有一个vue页面,并且想要解析html,则可以使用v-html指令。例如,
简单的问题/概念我正在努力掌握,提前感谢你们的帮助,这个社区对我来说是一个巨大的工具 如何处理评级或类似系统是一个固执己见的回答
您可以在后端执行业务逻辑(就像您建议使用MongoDB或Firebase那样),并使用Nuxt.js创建前端。使用Vuex,您可以为HTTP请求过程提供集中的状态管理,使其易于维护
请查看,它们非常有价值。您没有指定要构建的内容、限制/要求等。似乎您要求的是网页构建方面的普通教育,而不是VUE(这是您唯一的标签)。试着先阅读。
我在Nuxtjs应用程序中通过Vue.set()获得了一套属性
editPost(post) {
Vue.$set(post, 'edit', true)
}
出现错误:未定义Vue您可以使用此而不是Vue。。这将引用方法中的当前vue组件,因此其工作方式相同:
editPost(post) {
this.$set(post, 'edit', true)
}
您只需使用此而不是Vue。。这将引用方法中的当前vue组件,因此其工作方式相同:
editPost(post) {
我想通过JSON数组循环搜索关键字。我是指
entries是结构的JSON数组
[
{"a": "something", "id": 54785, "b": ["each", "every", "one"]},
{"a": "something", "id": 54785, "b": ["each", "every", "one"]},
{"a": "something", "id": 54785, "b": ["each", "every", "one"]},
]
s
消息:“this.data不是函数”
加载页面后调用data()的最佳方法是什么?也许我不知道这个.data()函数,
但只需使用如下示例中的数据:
mounted () {
this.data(); // or only data();
}
导出默认值{
数据(){
返回{
福:“酒吧”,
}
},
安装的(){
console.log(this.foo)//将打印“bar”
},
}
您是否试图访问在数据()中声明的组件的本地属性?或者您确实定义了一个名为data()的方法吗?为什么
标签: Vue.js
drag-and-dropvue-componentdraggabledrag
下面的代码包含用于拖放的部分。
div drag块,需要进行拖动,但在未拖放的第一次拖动时,该块不起作用。它从我们第二次拖动时开始下降
{{index+1}}
{{link.name}
{{link.url}
这个问题有一个解决方法,我们可以在vue实例的挂载钩子中初始化包装器实例时使用一些延迟。下面是显示示例的代码,谢谢
<template>
<display-panel @closed="closeDialog">
<template slot=
我正在为VueJS版本使用CoreUI模板,但我不确定如何从以下链接获取CInput值:
我想像这样绑定输入值:
下面是代码,我使用了v-model,但它看起来无法工作:
<template>
<div>
<p style="white-space: preline;">{{message}}</p>
<CForm>
<CInput
我的代码如下:
<template>
...
...
</template>
<script>
export default {
...
methods: {
...mapActions([
'getDataDoctor',
'getDataSchedule'
]),
async visibilityChanged(isVisib
标签: Vue.js
bootstrap-vuevue-test-utils
如何根据b-form-input组件的类型(如电子邮件、密码)选择该组件
使用vue utils库的查找方法
在my login.html中
<b-form-input
id="email"
type="email"
v-model="credentials.email"
:class="{ 'is-invalid': submitted && $v.credentials.email.$error }" />
在我的test.spec文件中
it
是否有机会从HTML内容生成PDF。我的意思是类似于打印到PDF的东西。我需要在技术绘图(绝对位置等)中使用非常困难的html,我需要获取整个Vue文件模板并生成PDF。这可以通过jspdf库实现
示例代码:
<div id="html">My HTML</div>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src=
我想在web中显示我的getter,但在console.log中我有未定义的错误。但在vue开发工具中,我的getter正在工作
我的组件代码:
export default {
data: () => ({
items: [
{ text: 'Real-Time', icon: 'mdi-clock' },
{ text: 'Audience', icon: 'mdi-account' },
{ text: 'Conversions', icon: 'md
我在Vuetify中有一个复选框,起初它的状态是不确定的。在我将其更改为true或false后,我有一个按钮将其重置为默认值,并再次显示不确定状态,但它不起作用。发生了什么?
Undeterminate的defalut值为true,值为null
<v-checkbox
:indeterminate="indeterminate"
v-model="value"
></v-checkbox>
当值更改为false至true时,组件侦听更改并将自身设置为不确定状态。
我需要在vue multiselect中使用全选和取消全选功能
以下是问题陈述/要求:
MainArray=[111211311566676668666911991144]
当我键入111时,vue multi-select将仅显示:
1112111115
现在,我需要一个选项来选择所有这三个项目一次点击,并需要添加这些项目到
selectedArray=[1112111115]
当我再次键入66时,将显示vue multi-select
66676668和6669
现在我需要选择所有这三个项目
标签: Vue.js
vuetify.jsdisablepaginator
当列表中没有项目或只有一页时,我想禁用按钮
<v-model="currentPage"
:length="lastPage"
total-visible="10"
prev-icon="mdi-menu-left"
next-icon="mdi-menu-right"
@input="handlePageChange&q
我有以下资料:
<div v-for="num in [1,2,3,4,5]" :key="num ">
<customelement0 :num ="num" />
<span @click="show = !show" > Details: </span>
<customelement1 v-if="show" :n
我目前想要创建带有SVG元素的Vue组件,作为模板的一部分,在.Vue文件中创建Vue组件。我正在努力研究如何从vetur获得Vue的IntelliSense以及SVG的建议
我已经尝试在VsCodesettings.json文件中设置文件关联,但是看起来您不能一次将一个文件类型关联到多个语言模式
是否可以在一种文件类型上使用两个不同的IntelliType插件,或者该功能还不存在