我正在尝试使用router.push({path:'customers',query:mergedQuery})重定向url但我无法获得对路由器属性的正确引用
我觉得app.js中缺少了一些东西,但不确定是哪一个。内部组件此。$route中包含一些内容,但没有路由器属性
app.js
window.Vue = require('vue');
window.VueRouter = require('vue-router');
window.VueResource = require('vue-re
我是Vue.js的新手。我有个问题
我无法访问下面的something()函数。
如何访问something()函数???
提前感谢:)
这与Vue无关。
提升是JavaScript将声明移动到当前范围顶部的默认行为。
提升适用于变量声明和函数声明。
因此,可以在声明JavaScript函数之前调用它们:
something(5);
function something(y) {
console.log("test")
}
不提升使用表达式定义的函数。
因此,您可以在顶部移动var som
我有groupData中的json数组,如何将数据传递给v-select
我知道在v-select内部使用v-for是错误的,但我不确定如何传递数据:
<v-select multiple
v-for="group in groupsData"
:value.sync="selected"
:options="[{label: group.group_name, value: group.id}]">
</v-select>
提前感谢。v-for重复整个元素
是否可以使用映射获取程序传递参数
我在主Vue实例中有以下内容:
computed: {
filterAuthors() {
return this.$store.getters.filterAuthors(this.search.toLowerCase());
}
}
此.search通过v-model=“search=绑定到输入字段,在我的Vuex实例中,我有以下getter:
getters: {
filterAuthors: (state) =&
我是Vue.js的新手。我正在尝试创建一个简单的登录表单,它将把值提交给ASP.net Web API。当我点击提交按钮时,我看不到POST下的表单数据。我正在使用Fiddler检查POST数据,它在WebForms选项卡下没有显示任何内容。在ASP.net Web API上,表单对象显示为null。为了简单起见,我将硬代码值传递给post字段
以下是login.vue中的HTML
<template>
<v-ons-page>
<v-ons-toolb
我正在使用vuejs和以下工具创建模态,但我为模态创建了一个单独的文件,这样我就可以在任何需要的地方调用模态组件
<template>
<div class="modal-mask" @click="close">
<transition name="modal-inside">
<div class="modal-dialog" :class="size">
<div clas
具体来说,我正在使用Vuetify构建一个应用程序。我试图通过v-card-media和src将图像添加到卡中。检查控制台,我可以看到我正在使用的.jpg被列出,但是图像没有显示出来。我承认我是Vue.js和js的新手,所以我可能有点经验不足,但我对此感到迷茫和困惑
我的印象是,单独使用JS,我必须采取一些额外的步骤才能正确地“读取”图像。Vuetify删除这些额外步骤的假设正确吗?也就是说,我可以发布,这样就可以在不需要创建额外函数的情况下获得所需的结果,还是我错得太厉害了?感谢您的帮助。经验
尝试让Dragabilly Vue插件与我的Nuxt应用程序配合使用:
我使用了与类似插件一起工作的常用方法,但我没有足够的知识来破解这个插件。我正在将以下内容添加到我的nuxt配置文件中:
plugins: [ { src: '~/plugins/vue-draggabilly.js', ssr: false } ]
该文件包含以下代码:
import Vue from 'vue'
import VueDraggabilly from 'vue-draggabilly'
Vue.use(V
我使用vue cli 3.0.0-rc.3生成了一个应用程序
现在我想使用VisualStudio代码(Chrome的调试器)调试它,但是我似乎找不到打开sourceMaps的选项
我在VSCode中设置了断点,但未命中。
如果我在vue.config.js中指定:“sourceMaps:true”,则会出现错误“vue.config.js中的选项无效:“不允许使用sourceMaps”
调试工作需要设置什么选项?根据需要执行以下步骤:
必须编辑vue.config.js文件并添加:
modul
我需要显示对象的键值。这是我的密码:
new Vue({
el: '#app',
data: {
x: {"2018-05-11":{"may":4,"june":8,"april":5}}
}
})
在我的模板中,我想显示:2018-05-11,但不是{“2018-05-11”:{“五月”:4,“六月”:8,“四月”:5}。我怎么能做到
您始终可以创建一个计算的方法:
newvue({
el:“#应用程序”,
数据:{
x:{
"2018-05-11": {
"五月":
我正在寻找重构的方法:
numxt.config.js
const headConfig = require('./config/head')
const modulesConfig = require('./config/modules')
const config = {
head: headConfig,
(...)
}
module.exports = Object.assign({}, config, modulesConfig)
module.exports = {
我有个小问题。
我正在使用Vuex,我有一个对象类型的“用户”状态,当我从我的组件调用它并将其分配给模型时,我认为一切正常,但在模型中进行更改时,我会自动变为我的“用户”,我不希望发生这种情况。您可以使用computed的set and get将vuex状态连接到v-model。
在get中,您应该编写一个函数,从存储中返回所需的数据。
在集合中,您应该编写一个函数,向存储提交一个变异
鼓励开发者以这种方式处理表单。
{
模板:'
{
template : '<input v-mod
我遵循从Vue组件访问Vuex状态的步骤。。。但每当我在我的组件中使用这个.store.something时,我就会得到TypeError:无法读取未定义的属性'something',请参阅本文底部的屏幕截图
文件上说,
通过向根实例提供store选项,存储将
注入根目录的所有子组件,并将可用
在他们身上是这样的。$store
…但该功能在我的应用程序中似乎不起作用
这是我的密码:
main.js
App.vue
Header.vue
错误:
代码中的一切看起来都很好。但是,在main.js文件
我有一个组件正在不同的地方使用,但在同一个地方,链接的颜色需要改变。我试过下面的方法,但没有成功
组成部分
<section class="contact__info">
<div class="details">{{days}}</div>
<div>
<a :href="'telephone'">
<strong>{{telephone}}</strong&g
标签: Vue.js
vuetify.jsvue-events
我想从一个嵌套组件获取一个输入事件,我看到该组件从Vue chrome devtools扩展启动
我只能使用v-on指令在VDatePicker上侦听输入事件。是否有方法在不扩展VDatePicker组件的情况下侦听VDatePickerDateTable输入事件
<template>
<v-date-picker v-model="selectedDays" multiple @input="onDayClick"/>
</template>
&
我正在尝试更改Vue2Floaple中的图层顺序(因此,当顶层作为阵列中的第一项放置时,它将显示出来,但当我更新绘制平铺层的阵列排序时,贴图不会反映此更改
Vue2传单可以对层进行排序吗
这是一把小提琴,显示问题所在
HTML
反向映射
图层顺序:
{{tileProvider.name}
vue先生
var{LMap,LTileLayer,LMarker}=vue2传单;
新Vue({
el:“#应用程序”,
组件:{LMap,LTileLayer,LMarker},
数据(){
返回{
Vue中是否有可能以类似的方式处理一个函数中的传入事件
<template>
<component v-on="eventsDistributor(eventName, $event)"/>
</template>
我在路由器视图中使用v-bind来处理组件中要使用的一些数据对象和函数,有些工作完全可以预期,但有些工作出于任何原因被渲染到DOM中,我找不到渲染它们和其他不渲染的原因
这正常吗?或者我该如何解决这个问题
F.e.userString和函数userFunction被呈现到路由器视图div中,而其他userString则不是
<router-view
v-bind:userString="userString"
v-bind:userObject="userObject"
//我的文件夹结构
问题是:我的边栏没有显示任何内容
这就是解决方案:
说明:
sidebar: [
'/',
{
title: 'Guide',
collapsable: false,
children: [
['/guide/Frontend','Frontend'],
['/guide/Backend' , 'Backend'
我试图在v-for循环中使用渲染几个组件。这很好,现在我需要在循环中分配v-model
这就是我所拥有的-一个对象数组,每个对象代表组件,有它的道具,模型
let formA=[{
组件:“formPartA”,
道具:{
价值1:正确,
价值2:“你好”,
},
模型:“formData.formA”//这是我需要在循环中使用的
},
{
组件:'formPartB',
道具:{
价值1:正确,
},
模型:“formData.formB”
},
];
数据:
data(){
返回{
表格:
所以我尝试在Vue应用程序中使用Cypress进行文件上传测试。出于某种原因,FE开发人员使用标签/输入而不是按钮组件。因此,HTML代码最终看起来像:
<label for="upload-137" class="field-upload>
<div class="layout justify-center">
<span class="v-btn">
<div class="v-btn__content">
<i cl
我的问题似乎很简单,但我想不通
我有这个
<VSelect :items="common.users.options" ></VSelect> which just shows me select and its options.
糟糕的是,VSelect向我显示了¼和½,正如您所看到的,没有将其转换为分数html
如何将分数显示到vselect选项中,而不只是简单的¼?覆盖项和选择插槽,并使用v-html
当然,您可以使用比div更奇
这些组件可以在不同的地方使用,有些需要手表中的立即属性,有些不需要
与变量相关的布尔值无效
watch:{
color:{
handler () {
let rgba = this.color.rgba;
let currentColor = rgba.a === 1 ? this.color.hex : `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a})`;
我正在尝试在端口8080上运行Vue,但无法使其工作。我刚刚用vue create.创建了一个全新的项目,并用npm run serve运行它,它在一个随机端口上启动应用程序
第一次尝试
运行npm运行服务,无需任何其他配置
$ npm run serve
> vue-demo@0.1.0 serve /Users/ne/projects/vue-demo
> vue-cli-service serve
INFO Starting development server...
我有一个vuex操作,它承诺发生突变:
updateStateProperty: (state, payload) => {
state.parent.child = payload.changer // trying to modify child property - fail
}
这抛出了一个:
我见过这个示例解决方案,但它缺少对deepClone用途的解释:
setSomething(state, payload) {
let parent = deepCl
我是vue新手,文档中说每次创建组件时都必须运行npm-run-dev和npm-run-watch。
但不知道他们的目的是什么?
有人能帮我吗?npm-run-dev将所有Vue组件和其他JavaScript文件合并到一个浏览器友好的组合文件中
npm run watch也会执行相同的操作,但它会保持活动状态,并“监视”您的.vue和.js文件的更新。如果检测到更改,它将重新构建浏览器友好的文件,以便您可以刷新页面。从技术上讲,这些文件将只运行包.json中定义的任何脚本,其名称为dev和wat
我试图在nuxt中测试复制到剪贴板,但测试用例无法涵盖navigator.clipboard.writeText,如何测试navigator内容,我还尝试了shallowMount
和安装但都不工作
<template>
<span v-b-tooltip.hover class="url" title="Copy" data-test="copyUrl" @click="handleCopy(listing.url)">
<i class="fa fa
我需要用JavaScript打印一些301/302响应标题:我看到了Angular的很多答案,但我正在使用Vue.js来获得结果。嗯,这其实并不重要,因为这主要是一个JavaScript问题……我的意思是,我不仅仅对Vue.js-only解决方案感兴趣,它可以而且应该适用于任何地方。作为前端开发人员,我无法手动创建这样一个场景:我的项目在其自己的服务器中返回重定向,并且很难找到一个没有CORS限制的随机远程页面。更清楚地说,我需要获得301/302响应的状态代码和状态文本,以及重定向之前新页面的
下面的代码片段显示了一个极端的示例,其中多次调用了完全相同的方法。有没有一种方法可以压缩它,这样它就不会显式地被称为N次
<someTag v-for="data in getData" :key="generateKey(data)-key" class="generateKey(data)" :id="generateKey(data)">
<p>{{ data.someProperty }}, {{ data.someOtherProperty }}</p&
我已经对后端/服务器中的数据进行了分页。我浏览了的文档,但无法理解其中的内容。由于我使用的是vuex,因此我的数据将存储在状态下。现在,如何将它们与,组合
resident.js:
export default {
state : {
residents: [],
},
mutations: {
set_residents (state, residents) {
state.residents = residents
},
},
我正在我的nuxt.js项目中使用@nuxtjs/axios。我正在从API获取内容类型,但axios将日期格式化为ISO 8601格式。是否有任何方法可以在nuxt.config.js中修改此内容
比如:
axios: {
data: 'yyyy/dd/mm'
}
有解决办法吗
我不想用那个时刻图书馆
这与Axios无关。Axios只是在请求对象上使用了JSON.stringify,并且JSON.stringify将日期转换为ISO 8601格式。如果您想要不同的格式,不要传递日期-自己格
例如,我有一条带有{{hello}}世界的消息带值hello=Hola我怎样才能做到?我知道我们可以使用{{hello}}来获取标记值,但是如果我想使用模板消息呢
我真正想要的是
<tag
:message=`{{hello}} world!`
:hello="hola"
/>
我尝试这种方法
<tag
:message="`${hello} world!`"
:hello="hello"
/>
data(){
return{
hello:
我知道可以像这样从捆绑的Web包文件导入组件
import {componentA, componentB} from '../component.bundle';
是否有可能实现与动态导入相同的功能,如下所示
const url = '${window.location.origin}/assets/default/js/bundle/vue_data.bundle.js';
this.getAxiosInstance().get(url).then(response =&g
我使用的是windows10,当我在VUEJS项目上运行Jest进行测试时,我发现:
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { shallowMount } from '@vue/test-utils';
运行npm运行构建需要什么
我有vue项目
我想把它安装到一个新服务器上
我只需要运行npm安装吗?通常npm运行构建将创建生产构建
构建过程为您做了很多事情:
透明文件JS代码
捆绑代码和资产
对资产使用缓存破坏技术
删除死代码
使用生产构建是进行生产的方式
稍后编辑:
您应该安装npm以便能够运行npm命令。您还应该在运行npm运行构建之前运行npm安装。您需要包含以下内容的package.json:
"scripts": {
"serve": "vue-cli-service
我正在尝试使用,这是为了与Heroku一起使用。我让它工作了,但我现在尝试添加Vuetify,当我尝试推送我的代码时,我看到下面的错误:
控制台输出
package.json
{
“名称”:“vue_应用程序”,
“版本”:“0.1.0”,
“私人”:没错,
“脚本”:{
“服务”:“vue cli服务服务--打开”,
“生成”:“vue cli服务生成”,
“lint”:“vue cli服务lint”,
“安装后”:“纱线构造”
},
“依赖项”:{
“@vue/cli全局服务”:“^4.4
我们是否需要销毁或断开使用Vue.observable()时创建的可观察对象?
通常,在销毁之前,销毁任何新对象并清除超时和任何可能导致内存泄漏的内容都是一种好做法。
但我想知道内部VueObserver实例是否也被组件销毁的内部机制(如组件本身)销毁,如果不是,如何正确停止观察并清除这些数据
即使在查看了Vue的源代码之后,我是否应该销毁一个观察者仍然不清楚。Observer类(在内部使用Vue.observable()创建)似乎没有任何停止观察的方法,并且在Vue官方文档中也没有记录
请提
标签: Vue.js
vuetify.jsv-autocomplete
我有一个Vuetify autocomplete,带有多个选择,其建议下拉列表不存储在本地,但在用户开始键入输入字段时,总是从服务器异步检索。代码如下所示:
fetch(“/echo/html/”{
方法:“张贴”,
标题:{
“内容类型”:“应用程序/json;字符集=utf-8”
},
正文:“html=”
})
.然后((响应)=>response.rows=[{
id:“6rfsda”,
姓名:“克里斯蒂亚诺·罗纳尔多”,
俱乐部:“尤文图斯俱乐部”
},
{
id:“vfgfas”,
起始情况:
父组件(Parent.vue):
........
导出默认值{
姓名:“家长”
...........
是的,没错。你试过了吗?不起作用吗?
<template>
........
</template>
<script>
export default {
name: 'Parent'
...........
</script
<template>
........
</template>
<scrip
如前所述,我们现在可以通过设置地图的mapId属性将基于云的样式应用于地图
我试着用这个来碰碰运气:
<GmapMap ref="mapView" :center="driver.location" :zoom="15" :options="{ mapId: '84f11e866388cfc5' }">
</GmapMap>
new this.google.maps.Map(document
在我的Vue项目中,我试图在生成过程中/之后将符号链接从/src文件夹或/public文件夹复制到/dist文件夹。我的vue.config.js文件如下所示
const path = require('path');
module.exports = {
publicPath: undefined,
outputDir: undefined,
assetsDir: undefined,
runtimeCompiler: undefined,
productionSourc
我创建了一个展示配方的小项目,我想创建一个配方,但是没有API和后端,所以我只想使用LocalStorage。
如何使用LocalStorage创建配方。
以下是完整的代码:
CreateRecipe.Vue:
<template>
<v-app>
<v-container>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
我想在vuex中将isMobile变量的值设置为true或false(基于用户使用的设备),该函数在加载应用程序时运行,而不是从任何组件内部运行
isMobile()函数如下:
isMobile(){
if(/Android | webOS | iPhone | iPad | iPod | BlackBerry | IEMobile | Opera Mini/i.test(navigator.userAgent)){
返回真值
}否则{
返回错误
}
},
状态变量是这样的:
从“Vue”导入
标签: Vue.js
nuxt.jsfacebook-opengraphmeta-tagsmeta
我尝试将特定于页面的OpenGraph和twitter元标记添加到我的Nuxt.js应用程序中。因此,我有一些特定于页面的属性
导出默认值{
// ...
头(){
返回{
元:[
{name:'og:title',content:this.tool.title},
{name:'og:description',content:this.tool.description},
//Twitter元设置
{name:'twitter:card',content:'summary'},
{name:'
我正在使用vue羽毛笔编辑器,并尝试将其用于自定义组件。这是我的密码
所见即所得
创建.vue
我想用一个额外的参数访问quill编辑器值,类似这样的
<wysiwyg-input @change="setField($event.text, 'content')" placeholder="Post Content" />
那么,在WysiwygInput.vue上更改什么呢?谢谢是预付款
Codesandbox链接:您可以使用
我有两个部分
第一个:
此组件有以下组件:
this.$router.push({path: '/dte', params: { id: 1 }});
我正在发送并重定向到/dte
我还有第二个,它在vuejs代码的创建部分中:
export default {
created() {
alert(this.$router.params.id);
}
}
我想知道:
如何检查id是否已定义
我想知道为什么它会在创建的钩子中显示这个错误:“TypeError:
我正在尝试为我的列表项分配一个背景图像,这些项将从如下代码中的对象获取数据。我没有问题,当我把https的随机img从网上,但我没有img显示,如果我链接到我的本地资产文件夹。你能告诉我哪里出了问题吗
我的存储文件:
data() {
return {
portfolioListData: [
{
id: 'id-1',
date: '2018',
title: 'Stitching Fair
我有一个非常基本的应用程序,默认的vue clisetup+一些组件和视图
应用程序was buildvue cli服务build在本地运行良好,但当我尝试在heroku上部署此应用程序时失败,出现以下错误
建造
运行构建
roh@1.0.0build/tmp/build⛙EAEC
vue cli服务生成
为生产而建
编译失败,错误为1,错误为下午4:21:05
找不到此相对模块:
错误生成失败,出现错误。
*../assets/Logo.png in./node_modules/cache l
我正在创建一个包含Vue组件的对象
当我需要通过字符串vs直接作为参数使用Vue组件时,我遇到了问题
//不工作
const vueComponentPath='C:\\Users\\username\\Desktop\\about page.vue'
常量vueComponent=require(vueComponentPath)。默认值
componentsToMount[componentName]=vueComponent
抛出一个错误:
找不到模块“C:\Users\username
我有一个使用底层Vue2组件实例的数据建模库,例如:
const Person = Vue.extend({
name: 'Person',
//- ... data, computed, watch, methods, events, etc...
})
const person = new Person({ ... })
我找不到文档来确定是否有一种等效的方法来创建一个从DOM中分离出来并在主应用程序上下文之外的新组件实例
当然,createApp()不是我想要的-从
我