Vue中的转换非常好，但问题是，当DOM在某些内容消失后重新调整时，会产生不和谐。因此，具有过渡的东西会淡入淡出，但随后所有周围的元素都会进入合成空间 人们是如何处理的？这取决于你想要达到什么效果。如果您想淡出，那么将其他页面元素滑入到位，您可能希望使用javascript动画，而不是标准的淡出过渡。使用jQuery或类似的工具，这种效果非常直接。您只需在视图模型中创建两个方法，并使用v-on:enter和v-on:leave绑定它们，这样在HTML中您就可以： <transition

如何使用VueJS关注负载 如果使用jquery，我所要做的就是： $(document).ready(function() { $('#username').focus(); }); 是否有vue方法？您可以为此创建自定义指令： // Register a global custom directive called v-focus Vue.directive('focus', { // When the bound element is inserted into the DOM

我有下面的路线结构 /event/:id/schedule/:id 我想要的是，当用户转到子组件/路由时，父组件/路由的某些元素会隐藏。当用户返回到父级时，这些元素应该返回 在父组件上，我尝试监视$route对象，但没有触发任何操作。在父组件的已装入/已创建方法处附加挂钩将不起作用，因为用户仍在这些路由中。我看到了一些关于 watch(){ $route: { console.log('route change'); } } 我

我的main.js如下 import Vue from 'vue' import App from './App' import vueResource from 'vue-resource' import VueRouter from 'vue-router' import Registration from './components/Registration.vue' import Login from './components/Login.vue' Vue.config.pro

我有以下Vue的主要实例： let App = new Vue({ el: '#app-container', data: { countries: [] }, created() { this.getCountries() }, methods: { getCountries() { let self = this; axios.get(

我正在使用Nuxt.js构建一个静态网站 如何访问组件的脚本代码中当前显示的路由名称（我希望避免从浏览器位置读取直接url） 我是否可以访问$route.name？是的，您可以使用vuejs路由对象，如$route.name或$route.path $nuxt.$route.path 返回电流路径 $nuxt.$route.name 当前路由的名称（如果有） route对象表示当前活动路由的状态。信息技术 包含当前URL和路由记录的解析信息 由URL匹配 $route.path 类型：

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

我正在使用此处找到的VueJS网页包模板： 示例路线： 示例错误： [eslint]分析错误：意外的令牌导入 我遵循了Webpack的动态导入部分提供的步骤，以及Anthony Gore关于如何在路由器级别使用VueJS完成代码拆分的博客文章。更具体地说，以下是我的设置： Package.json B.法律改革委员会 .eslintrc.js 我有点不明白为什么我仍然看到这个错误。当使用npm run dev和npm run build时，我的代码按预期运行和工作，但此解析错误会阻止文件的其余部

我有一个API（流明）抛出的对象错误 然后，我将此错误分配给mess变量，并尝试用此代码将每个错误作为单独的警报输出 <v-alert v-for="me in mess" v-if="mess" error dismissible v-model="mess"> {{me[0]}} </v-alert> {{me[0]} 但是，当我消除1个错误时，所有错误都被消除/删除v-model绑定负责警报的可见性，因此需要一个布尔属性。允许稍微更改数据的结构： ne

我完全陷入了阿波罗问题中，为此我打开了一个GitHub问题，但没有得到任何回应 我用optimisticResponse调用阿波罗突变。据我所知，它的工作方式是调用两次update（）：首先调用乐观数据，然后调用来自网络的实际数据 但出于某种原因，我的代码不是这样工作的。我收到两个update（）调用，都是乐观数据 以下是一份回购协议，展示了这种行为： 纱线与纱线开发 在浏览器中打开，打开控制台 输入一些文本并按Enter键 重复上述内容 注意控制台中关于重复键的错误。这是因为临时ID“？”没有

简单地说，我只想更改Vue对象的整个数据，如下所示： vueobj.$data = newdata; 但是官方文件说这是不允许的： VM156 vue.js:597[vue warn]：避免替换实例根$data。使用 而不是嵌套的数据属性 （位于） 因此我尝试了另一种方法：首先通过$destroy（）销毁vueobj，然后创建一个新的vueobj，将新数据对象绑定到同一个UI元素，但在此之后，UI元素仍然使用旧数据。那么我该如何解决这个问题呢？谢谢 2021年更新： 这是正确的解决方案 Vu

我需要使用mask属性来验证输入，然后才能将其添加到所选项目的列表中 代码： newvue({ el:“#应用程序”， 数据：（）=>({ 选择：“” }) }) 在Vuetify中将mask属性与多个属性一起使用时存在错误。删除多个，它就会工作。这里有一个代码笔，使用相同的代码，以便更好地理解这可能有助于我尝试此操作，但我需要添加多个值，因此这对我没有帮助：/

1.0.0-beta.25 复制链接 复制步骤 从https://codesandbox.io/s/8xrrjpy349 运行npm安装 Runnpm Run test测试执行将启动，它将抛出一个错误TypeError:无法读取未定义的属性“breakpoint” 人们期望什么？ 测试应按照文档https://vue-test-utils.vuejs.org/api/shallowMount.html 到底发生了什么？ 返回类型错误 项目是使用nuxt和vuetify.js设置的 在代码设置

我正在打字。我的typeahead接受像['Canada'、'USA'、'Mexico']这样的数组列表。 现在我有了一个axios api来获取国家列表。但我不知道如何转换为数组列表。现在，如果硬编码国家/地区列表，则可以工作 <vue-bootstrap-typeahead :data="addresses" v-model="addressSearch" /> data() { return { addresses: ['Canada', 'USA', 'Mexico

当我在挂载的钩子中调用映射的Vuex操作时，该操作会起作用，但控制台中会出现“TypeError:xxx不是函数”错误 以下是此组件的整个脚本部分： 从“@/components/SideNav.vue”导入SideNav 从“@/components/ActionBar.vue”导入ActionBar 从“@/components/Summaries.vue”导入摘要 从“vuex”导入{mapState，mapActions} 导出默认值{ 组件：{SideNav，ActionBar，S

我试图使用一种方法将值传递给v-model，但它不起作用 我在顶部包括了无线电选择器，用于将数据变量'field'的值从name切换到place和viz-a-viz 文本输入的v模型包含字段，我想使用changeField（）方法更新该字段 newvue({ el:“应用程序”， 数据：{ 名称：“”， 地点：''， 字段：“”， selectedField:“名称”， }, 方法：{ changeField（）{ if（this.selectedField=='name'）{ this.fi

我在使用插槽从组件访问数据时遇到问题 这是我的密码： codepen.io/anon/pen/BbOEZz 我要排队： {{desc_01} 它开始工作，并在模板的插槽中显示带有日期的值 有人能帮我解决这个问题吗？您的代码中有几个错误 1.您不能直接从孩子处访问数据。子对象通过事件与父对象通信，使用 你应该 从孩子身上激发一个事件 在父节点上收听事件 更新父级上的变量 2.应用程序上没有声明desc_01。模板在应用程序的上下文中执行，而不是在子应用程序的上下文中执行，因此您还需要定义该属性

我正在寻找一个vue表作为npm包，它支持列的拖放和可配置的列可见性 在React项目中，我通常使用Mui数据表，它为可见列提供了一个很好的选项 在研究过程中，我发现npm vue-tables-2似乎是vue.js项目的一个很好的替代品。但是，我缺少拖放列的功能。您可以推荐任何支持此功能的现成软件包吗？vuetable可配置列可见性。示例：。结合使用，您可以更改配置覆盖中列的顺序。@RWAM，谢谢您，它起作用了great@RWAM请随时提供您的评论作为答案，因为它回答了我的问题vuetable

我有一个.js文件，我想在其中读取通过.env.*文件设置的Vue环境变量的值 在创建Vue实例的main.js文件中，我可以通过“process.env…”读取这些变量/设置。 然而，在另一个.js文件中，我找不到在那里读取它们的方法。没有可见的“process.env…”变量。我也无法通过“this.”对象或“Vue.”对象找到它们（以代码中该点设置的为准）。例如，不是通过“Vue.process.env…”之类的方式。 我通过以下方式导入此文件开头的Vue： import Vue fro

下面的代码正在抛出意外的令牌导入 const Router = new VueRouter({ routes: [ { path: '', component: () => import('pages/landing/landing') } ] }) 如果我确实喜欢以下内容，则它正在工作： import landing from 'pages/landing/landing'; const LandingComp = Vue.component('search

我有一个使用Vue csp的chrome扩展 我将其实例化如下： class MyMethods { testMe(){} anotherFunction(){} } const methods = new MyMethods(); const app = new Vue({ el: '#app', data: () => appData, methods }); <div class="tests" v-if="testing"> <b

我的vue cli服务在端口3001上运行，我的后端rails应用程序在端口3000上运行 我希望所有未知请求都转到后端rails应用程序。在阅读vue cli文档时，下面的代码似乎可以正常工作，但事实并非如此 module.exports = { devServer: { disableHostCheck: true, port: 3001, public: '0.0.0.0:3001', overlay: {

我有一个OneSignal帐户。 我有一个用VueJs构建的前端PWA，它收集用户并将其发送到标记中的位置 OneSignal.push(function() { OneSignal.sendTags({ latitude: latitude, long: longitude }) }) 我已经成功地从API发送了推送消息，在寻址所有或特定段时。 我的问题是在使用位置过滤器时 我已尝试使用此Json： {"app_id": "APIKEY","c

我想知道是否可以修改，以便在我单击通知上的任意位置时自动关闭，而不仅仅是在closable:true生成的x十字上。 我一直在寻找改变buefy元素默认行为的解决方案，但我没有找到任何接近的方法。 任何帮助都将不胜感激 编辑：我想通过单击通知来关闭通知，而不是在通知之外。但我不知道如何将onClick行为作为一个整体附加到buefy元素。实际上，您需要捕获页面上的任意位置，然后： isActive = !isActive 这里回答了如何捕捉元素外部的单击的问题： 但是要小心！首选答案在Vue.

抱歉，我需要有关查找元素v-select和通过cypress.io选择选项的帮助 试试： cy.get('[data-test=test]').type('valueNameGoesHere{enter}', {force: true}) 因为您使用的是Vuetify的select，所以他们的文档应该是第一站。检查下面的参考资料 基本上，它们添加了data-cy数据属性，以便于针对元素。在你的例子中： 然后在你的测试中： cy.get（'[data cy=select input]'）。

我运行了vue cli服务构建，一切正常 但是如果我运行vue cli服务构建--模式开发- 我收到错误消息： 错误：无法在“/home/nik/DEV/my/blackchaose.vuejs_tpl/development”中解析“/home/nik/DEV/my/blackchaose.vuejs_tpl” 你知道我做错了什么吗 我还可以如何在开发模式下运行程序集 p、 我在根目录中已经有一个.env.local文件，其中包含以下内容：NODE\u env=development当NODE

我正在创建一个web应用程序，它有一个表，显示我使用vue.js创建的数组中的信息。我希望能够根据管理员帐户的需要编辑/更新/删除数组的内容，然后更改表的显示内容。 我的当前阵列 var app2=新的Vue({ el:“#应用程序”， 数据：{ 搜索：“”， 课程：[ {'topic'：'x'，'description'：'x'，}， {'topic'：'x'，'description'：'x'，}， {'topic'：'x'，'description'：'x'，}， {'topic'：'x'

我有一个vuetify树视图，我正试图使用它创建菜单。treeview工作正常，但我无法使用模板将路由器链接添加到Vuetify treeview。我已经创建了一个代码笔。我错过了什么 模板： <div id="app"> <v-app id="inspire"> <v-treeview open-all dense :items="items"> <template v-slot:prepend="{ item }">

我在VueJS模板中有一个简单的列表： <template> <div> <h3>This is the list of groups :</h3> <ul> <div v-for="group in groups" :key="group.id"> <li> <strong>{{ group.id }}</strong>

我曾尝试在vue.js应用程序中使用Axios调用API，API调用成功，但值未受影响。我想设置从API响应返回的值 Vue.js代码 HTML代码 {{info}} 我想你错过了包含axios的 newvue({ el:“#应用程序”， 数据（）{ 返回{ 信息：空 } }, 挂载（）{ axios .get（'https://api.coindesk.com/v1/bpi/currentprice.json') .然后（response=>（this.info=response）） }

我目前正在使用Vuetify数据表，您可以在其中添加产品。最后，我想根据所有这些产品的价格进行计算。这些产品都有一个ID，但当我将这些产品添加到数据表时，会出现以下错误： 检测到重复的密钥：“12”。这可能会导致更新错误 我知道这是因为我使用了产品的ID。但我怎样才能防止它给我这个错误呢？我应该传递一个完全不同的ID而不是产品本身的ID吗？我以后可能需要产品ID。我想知道什么是最好的解决办法。提前谢谢 我建议您添加一个具有唯一id的列。如果您有一个对象数组： array.forEach((ite

我有一个在SPA模式下运行的现有nuxtjs页面，基本上只提供静态html。我最近建立了一个无头ghost博客，并根据ghost站点上的教程添加了所需的代码，以便从该站点中提取。那很好用 最新文章 {{post.authors[0].name} {{post.title}} {{post.extract}} 从“/../../api/posts”导入{getPosts}； 导出默认值{ 异步数据（）{ const posts=等待getPosts（）； 返回{posts:posts}

我正在努力将道具传递给我的孩子组件，并且阅读了很多例子，我的位置上有一些安静的例子。看来这不应该这么复杂，对吧？ 理想情况下，当我将组件放到html页面上时，我希望能够将url作为属性传递。例子 但当我在浏览器中使用Vue开发工具检查时，它总是未定义的。我见过一个使用JQuery选择元素然后获取属性的黑客，但我想在纯Vue中这样做。 在我下面的代码中，“title”的任何变体都不会传递给我的组件 在我的index.html页面中，我有以下内容 <body> <

我有一个v-for，它读取不同的.md文件，这些文件的前面有图像属性 我正试图更改我的div的背景图像，但它必须读取来自frontmatter文件的url 代码如下： <div v-for="item in projectsList" class="li" > <div style="background-image: url(https://i.pinimg.com/originals/4f/c4/92/4fc49228a940e414

我试图根据campaignstatus值中的值命名一个类，但当我添加or以检查红色时，它会中断并且不起作用 :class="{orange : campaignStatus.value ==='ARCHIVED' || campaignStatus.value ==='PAUSED'} || {red : campaignStatus.value ==='BANNED' || campaignStatus.value ==='REMOVED'}" 然而这项工作 :class="{orange

我有下表 是否可以以某种方式获取列计数并在colspan中使用它，而不是硬编码的7？我想我可以使用一些复杂的逻辑和自定义道具来解决这个问题，但可能有更好的方法。我还可以使用例如999999，它的效果令人惊讶 我尝试了colspan='fields.length'，但那不起作用。你的尝试太接近了 为了让vue理解您希望将变量作为属性值传递，需要在其前面添加冒号，如下所示： <b-td :colspan='fields.length' class='text-center'>

我创建了一个从状态获取值并返回不同值的getter secondCoverageSSData: state => { const fs = state.secondCoverageSS; Object.keys(fs.data).forEach(key => { fs.data[key]["Risk buckets"] = `(${fs.data[key]["Risk buckets"].right - fs.data[key]["Ris

我正在使用包翻译我的Vue项目，并希望使用vs代码扩展来管理翻译。此扩展的默认文件夹结构如下： locales # i18n, langs, locale are also acceptable ├── en.json ├── de-DE.json ├── zh-CN.yml # YAML ├── zh-TW.ts # You can mix different formats ├── ... └── <country-code>

我是Vue的新手，我正在尝试通过数组进行循环。不知道我做错了什么，但列表没有显示在HTML上。下面是代码：这是一个通过路由器视图呈现的索引文件 {{锦标赛名称} {{score}} 导出默认值{ 名称：'索引'， 资料{ 返回{ 比赛：[ {标题：'Muthaiga golf Tournament'，slug:'Muthaiga golf Tournament'，得分：['Round 1'，'Round 2'，'Round 3'，id:'1'}， {标题：'Wilson Churchill'，鼻

我正在尝试使用Thread工作区和lerna为前端项目设置monorepo。 将为其中的所有应用程序包提供一个共享组件库 项目结构如下所示： 根目录 ├── lerna.json ├── package.json └── 包装 ├── 用户界面库 │ ├── src/main.js │ ├── dist/library.common.js │ └── package.json └── 应用程序 当我在我的应用程序中导入ui库时，它会给我各种各样的lint错误 软件包/用户界面库

我在控制台中得到了这个：uncaughtypeerror:\u vue\u网页包\u导入的模块\u 0\u。默认值是未定义的 main.js import { createApp } from "vue"; import Vue from "vue"; import BootstrapVue from "bootstrap-vue"; import "bootstrap/dist/css/bootstrap.css&quo

你能告诉我如何解决这个问题吗：画布有1200x700px，但绘图的比例是300x150 导出默认值{ 名称：“HelloWorld”， 数据（）{ 返回{ msg:“欢迎使用您的Vue.js应用程序”， vueCanvas:null， 像素：空 } }, 方法：{ 鼠标：功能（事件）{ this.vueCanvas.putImageData（this.pixel、event.offsetX、event.offsetY） this.msg=event.offsetX+“：”+event.off

我尝试使用插槽自定义vuetify数据表标题。 我禁用了默认标题，并使用v-slot:header创建了一个新标题。 问题是，如果我创建新标题，则没有支持切换SelectAll功能的复选框。 代码如下 <template v-slot:header="{ props: { headers } }" > <thead> <tr> <th v-for="header in headers"

因此，可能每个电子商务网站都有这样一个功能，即如果您将产品添加到购物车中，它将存在于手机、计算机或选项卡中的任何位置。我知道如何在会话中存储数据，但当我跳入另一个设备时，我无法看到我的购物车产品，尽管我使用的是同一个帐户。因此，有人能告诉我吗告诉我如何在会话或本地存储中存储数据，这些数据不会被跳转设备删除，并且会在用户状态更改时更改。我正在尝试使用vuejs来实现这一点。如果您提供基于vuejs的解决方案，我将非常高兴。谢谢..这是否回答了您的问题？这里有一个类似的问题

我的main.js文件中确实有以下代码： import Vue from 'vue'; import App from './components/App'; import router from './router'; const app = new Vue({ data: { loading: false }, router, render: h => h(App), }).$mount('#app'); 现在我尝试从我的路由器设置加载变量（/router/index.

目前，我已经建立了一个Vite 2项目，并将monaco editor作为依赖项 每当我试图使用它时，它都说工人不是进口的 editorSimpleWorker.js:454 Uncaught (in promise) Error: Unexpected usage at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:454) at webWorker.js:38 因为我使用的是Vite 2，所以我假设只

我创建了一个使用路由器的新Vuejs 2项目，并使用npm run build构建它，然后将我的/dist文件夹上载到~/public\u html文件夹，该文件夹的访问方式如下：http://localhost/~myusername/dist但是，当我访问路由器链接或其他东西时，我会被重定向到这样的链接http://localhost/img/viejs.jpg 我尝试创建.htaccess文件并添加以下内容： <IfModule mod_rewrite.c> RewriteEn

我想把圆形图标改成星形图标。谁能帮我把它改成星型而不是圆形？我试着把内容放到css中，但它不起作用。多谢各位 您也可以在此处访问代码： 代码如下： <template> <section> <b-steps v-model="activeStep" :animated="isAnimated" :rounded="isRounded" :has-

在单击save按钮并将数据发送到API之后，我想添加一条toast消息。 我在下面的代码中添加了一条吐司消息，它出现在屏幕上，但转眼间就隐藏了 我应该再加一点吗？或者有另一种方法在动作后使用消息，可能使用警报而不是祝酒 谢谢你的回答 axiosInstance .put(`{{here is my endpoint}}`, payload) .then((response) => { console.log(response); let notifi

我有一个简单的vue/nuxt项目，我想从AWS lambda提供服务。 为此，我想将所有内容分组到一个文件中 我看到Nuxt拆分文件是为了在给定时间只加载重要的内容，但应用程序是一个单独的页面，供内部使用，加载时间/内存使用完全无关 我的问题有两个： 如何禁用文件拆分 有没有办法将所有内容打包到一个index.html文件中？我没有在网上找到解决方案，因为在我开始研究解决方案的那一刻，我一直在寻找关于SSR的帖子，这与我的案例完全无关 对于拆分部分，将all设置为false的这一部分就足够了