我有一个组件 我想在单击后运行方法 <my-component @click="showOtherDiv"></my-component> 但“点击”似乎对整个组件不起作用 注册组件，并在其中声明处理程序方法： Vue.component（'my-component'）{ // ... 方法：{ showOtherDiv:函数（）{ 警报（“某些消息”）； } } }); 将.native修饰符添加到事件名称： 发件人： 将本机事件绑定到组件 […]当您想要侦听

Vue-我希望跟踪页面上的用户更改，并在用户离开时发送这些更新。基本思想是 //child beforeDestroy: function() { var that = this; axios.post('gate/cart.php', userUpdates) .then(function(res) { if (res.data.success) { that.$emit('updateCart', res.data.cart); //parent

我只是从Vue.js开始，我对将数据从组件传递到父viewmodel/组件有多复杂感到困惑 我的用例如下： sliderSum: function () { var sum = this.slider1RoundedValue * 1 + this.slider2RoundedValue * 1 + this.slider3RoundedValue * 1 this.$emit('sliderValueHasMutated', sum) return sum }, 我有一个自定义的

我的应用程序中有两个页面的名称： 1） 相册_id.vue 2） 相册 “id”参数应该是一个数字。第一种情况下的路由应类似于{name:'/album'，params:{id:'123'}}，第二种情况下的路由应类似于{name:'/albums'，params:{id:'123'} 问题是-当我重新加载页面时，它将url“…/albums123”视为{name:'/album'，params:{id:'s123'}} 问题是: 在这种情况下，使用Vue2和Nuxt为id设置数字验证器的最佳方

应该可以直接引用数据值内的属性。 但由于某种原因，在中不起作用。我创建了一个小示例： 作为解决办法，我现在正在做以下工作： computed: { foo() { this.whyDoesNotWork = this.message; } }, watch: { foo() {} } 因此，计算函数直接对数据进行变异。非常粗糙，可能是错的。 有人知道仅仅引用属性的初始示例有什么问题吗？Vue.component（'child'）{ Vue.compon

我正在尝试在Vue.js 2应用程序中创建搜索函数。然而，即使我的算法给出了正确的结果，我也没有得到正确的过滤器。现在，每当我运行搜索时，我在页面上什么也得不到。这是我的密码： computed:{ filteredSmoothies: function(){ return this.smoothies.filter(smoothie => { var stuff = smoothie.title.split(" ").concat(smoothie.description.s

我正在尝试使用Vue模板将按钮添加到剑道下拉列表的末尾 样品在图纸上给出 示例中显示的示例将按钮添加到列表中项目的每个迭代中 但我想显示如下图所示的项目： 我现在所做的： <template> <kendo-dropdownlist v-model="dropdownlistValue" :template="itemTemplate" :data-source="Com

我有这样一个模板组件（第页）： 在我的loop over Ingreents列表中，我有一个问题，只有前十个显示，我无法向下滚动查看其他。有没有办法拿到卷轴 Oups（rtfm）事实上，有一个scrollview元素就是为了这个目的而做的： <template> <Page class="page" v-if="showDisplay"> <ActionBar class="action-bar" title="Resultsiiii"/> &l

我在vue.js中遇到了关于“未捕获类型错误：'instanceof'右侧不是对象”的问题 我使用的是Vue 2.2.1版本，下面是我的代码片段，我从中得到了这个问题 Vue.component('componentName', { 'template': ``, props: { contentTypeUid: { type: 'string', required: false }, limit: { type: 'number', require

我想输出一系列条目，其中包含一个值 但是对于每一行，我想显示从开始到当前行的所有值的总和 例如： // App.vue <template> <div> <Row v-for="item in items" :value="item.value"/> </div> </template> <script> export default { data() {

我正在使用Vue.http执行http请求，但数据未发送 在服务器端，命中控制器方法，但请求为空 console.log(email, username, password) // NOT EMPTY Vue.http({ url: 'auth/signup', method: 'POST', data: { email: email, username: username,

我有VUEJS应用程序，我使用CKEditor，我想在工具栏上添加颜色按钮，但它不起作用 import CKEditor from '@ckeditor/ckeditor5-vue'; Vue.use(CKEditor); <ckeditor :editor="editor" :config="editorConfig"></ckeditor> editor: ClassicEditor, editorData: "<p>Content of

我正在尝试用autocomplete创建Quasar自定义选择组件。除了验证错误之外，其他一切都正常工作，只有当我单击输入框并离开而不添加任何值时，才会显示验证错误。但是，即使有任何错误，表单仍在提交 组件代码 <q-select ref="members" v-model="sModel" use-input :options="filteredOptions&quo

我使用vue cli创建了一个项目，然后添加了： vue add unit-jest 当我尝试运行测试时，即： npm run test:unit 我得到以下错误： Error: Cannot find module '@vue/cli-plugin-unit-jest' 我使用的是vue cli 4.5.9和节点v12.19.0以及npm 6.14.8 cli插件unit jest是作为unit jest的一部分安装的，所以不知道为什么会出错？我遗漏了什么吗？所以我遗漏了 npm安装-

我有视频列表 一旦我在完成后播放了第一个视频，它将在vuejs laravel中播放第二个视频，然后再播放第三个视频。 我正在使用vue core视频播放器进行视频播放。我不明白如何创建播放视频的循环，我需要在播放器中添加下一步按钮 循环道具可在以下位置使用： 至于“下一步”按钮，因为它不在文档中，我想您需要使用以下内容来创建自己的按钮： 暂停视频 将当前视频替换为阵列中的下一个视频 再次播放视频 嗯，我不明白。你没明白什么？如果你能分享一些代码，我们可以继续前进。像这样，我不确定我能提供更多

如何更新此输入以使用Vue.js 2 <input value="{{item.id}}" type="text" name="emails[{{$index}}]['id']" /> 就我所知： <input :value="item.id" type="text" class="form-control" name="emails[{{$index}}]['id']" /> 我不确定如何更新name属性。对于name，您也必须使用v-bind或简而言之：如

我试图在vue.js中获取select region的值，但得到的是空值 alert(this.property_credentials.district); 有什么建议吗？如何从select中获得价值 <select v-model="property_credentials.district" name="district" class="country selectpicker" id="selectCountry" data-size="10" data-show-su

从中，我无法确定何时对数据进行评估 请参见下面的示例代码： <template> ... </template> <script> function generateUniqUserRef () { return Math.random() + new Date().valueOf() } export default { data() { return { user_ref: generate

我需要一些帮助。输入框似乎没有出现。我没有使用app.js，因为它给我带来了Buefy的问题。我做错了什么？谢谢 <!doctype html> <html lang="{{ app()->getLocale() }}"> <head> <!-- Fonts --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="styl

我在一个SPA上使用Vuetify的工具栏滚动技术功能，它需要在每个页面转换之间滚动到容器顶部。当我使用scrollTop通过javascript触发此操作时，滚动工作正常，但它似乎没有让Vuetify知道发生了向上滚动，因此主工具栏丢失。如果特定页面的长度不足以需要滚动，则无法恢复主工具栏 对于如何将用户从javascript滚动到容器顶部，以及如何让Vuetify将主工具栏移回原位，我将不胜感激 <v-toolbar :scroll-off-screen="true" :scroll-

（在web开发方面迈出了第一步，但目前看来，我甚至无法使用最基本的工具，例如浏览器调试器。） 当我初始化一个新的vue.js 2.x项目时，如下所示 sudo npm install --global vue-cli vue init simple vue1 （接受所有提示的默认值） 。。。然后继续在Chromium中打开生成的index.html，我或多或少看到了我在浏览器调试器中所期望的结果。更具体地说，我可以在浏览器控制台中输入以下内容 this.app.$data.greeting =

我创建了一个nativescript vue项目，它遵循官方的开始指南 但当我尝试在浏览器上启动并预览它时…除了“搜索设备…”之外，我从终端上什么也得不到 我是新手，有人能给我一些帮助吗？nativescript vue正在搜索连接到您的环境（或模拟器）的移动设备。浏览器中不会发生任何事情，因为这是一个移动开发框架。要测试它，请连接一个真正的移动设备（Android或iOS，但对于iOS，您需要MAC和配置文件及证书），或者创建一个模拟器/模拟器并试一试。OK。谢谢你的回答。有没有办法在浏览器上

我使用的是Vuetify扩展面板，每当用户单击标题时，我都想做一些事情 我的问题是，标题项周围有一些空白。因此，一旦你点击边距，事件就不会触发。我试着把点击事件放到家长身上，但没有成功。是否可以在不重写vuetify样式的情况下实现此类单击侦听器 下面的css可以实现这个功能，但对我来说有点脏。（范围界定不起作用） 我认为您的CSS解决方案将是相当可观的 在我看来，有一种基于javascript的解决方案比CSS更肮脏 new Vue({ el: '#app', methods:

Vue新手，在Vue实例中遇到了问题。我的vue数据对象是： new Vue({ el: "#app", data() { return { vm_instance_data: [], standings: [], currentTab: "", tabs: ["MLB", "NFL", "NBA"], isCompleted: false, gameDate: date.yesterday.substr(4

我已使用vue cli“vue init webpack simple my app”命令创建了一个新项目。在新的安装副本中，我尝试在默认情况下创建的App.vue组件中导入vue路由器。但它给了我一个错误：“未捕获引用错误：未定义Vue”。如果我在App.vue中再次导入vue，则该应用程序工作正常。但是我已经在main.js中导入了vue，那么为什么我需要在App.js中再次导入它呢？有什么方法可以使用从main.js导入的vue吗？这是我的密码： main.js： import Vue f

给出了使用Ava的官方Nuxt端到端测试示例： import test from 'ava' import { Nuxt, Builder } from 'nuxt' import { resolve } from 'path' // We keep a reference to Nuxt so we can close // the server at the end of the test let nuxt = null // Init Nuxt.js and start listeni

在下面的代码中，当父级的模板是如下所示的text/x-template时，子组件（父级内部）将被渲染： <script type="text/x-template id="#list"> <div class="wrapper"> <p>{{firstName}} - <button @click="changeFirstName">Change</button> </p> <

我在./components/basic文件夹中收集所有简单的全局组件，并希望全局自动注册 代码如下： import Vue from "vue"; import upperFirst from 'lodash/upperFirst'; import camelCase from 'lodash/camelCase'; const requireComponent = require.context('./components/basic/', true, /[A-Z]\w+\.(vue|j

在我的组件中，我正在显示图像，但在控制台中显示此错误GEThttp://127.0.0.1:8000/uploads/null 404（未找到） 我的代码 <img :src="`./uploads/${student.image}`" alt="No Image" style="height: 80px; width: 80px"> <tr class="text-center" v-show="students.length" v-for="(student, index

我有两个视图A和B，它们加载在路线“routeA”和“routeB”中 在视图A中，我正在加载视频 当我单击视图A中执行$router.push（{name:'routeB'}）的按钮时，它加载视图B，但我仍然可以收听视频音频，这意味着DOM没有清除上一个视图中加载的任何内容 我加载路线的方式如下所示： const routeA = () => import('./components/A.vue'); const routeB = () => import('./component

我有两个主视图，它们使用一个共享布局组件，该组件有几个命名插槽。在许多情况下，我使用包装标记传递插槽内容，因为这些标记不会导致不必要的div，这会严重破坏布局。我试图编写测试来测试这两个视图组件 这很好，但在执行shallowMount（）测试组件时，我看不到输出中的内容，因此我的所有测试都失败了。执行完整的mount（）在这里根本不是一个可行的解决方案，因为组件处于“页面”级别，并且有很多副作用（我无法测试需要测试的交互）。我也尝试过“渲染”作为一种替代方法，但这也没有用，因为我需要测试控制不

我有一个关联对象 records: { '15/07/2017': [], '16/07/2017': [], } 我想向对象添加一个额外的项，目前我必须使用： Vue.set(self.records, '17/07/2017', []); 我遇到的问题是，该记录被添加到列表的末尾，而我希望该记录位于列表的前面。如何纠正这一点？javascript中的对象键没有保证顺序。当您呈现信息时，您需要对其进行排序，除非您可能使用映射。正如hughes javascript对象没有特

据我所知，vuex路由器同步仅用于将路由与vuex存储同步，开发者可以访问路由，如下所示： store.state.route.path store.state.route.params 但是，我也可以通过this.$route处理路由，这更简洁 我什么时候需要使用商店中的路由，在什么情况下需要vuex路由器同步？这是我的两分钱。如果您无法在项目中找出它的用例，您不需要导入vuex路由器同步，但是当您试图在vuex的方法中使用route对象时，您可能需要导入它（this.$route在vuex

我正在尝试编写一个Vue指令，该指令在评估组件之前更新组件的属性 例如，考虑以下内容： <b-modal v-i18n:title="'i18n.key'"> Hello </b-modal> 遗憾的是，这一尝试没有成功。它会导致对最终DOM元素的更改，并且对经过Vue组件的属性没有影响 如何修改上述指令以更改b-modal组件过去的属性？翻译是否存在于您的b-modal组件中，或者您希望将其集成到您的自定义指令中？是否有一些原因导致：title=“$t（i18n.

我已经为使用个人访问令牌的用户正确设置了它，但希望保护所有api路由。阅读文档听起来像是我需要的。我的.env文件中有客户ID和客户机密；我已经使用\Laravel\Passport\Http\middleware\CheckClientCredentials:：class添加了客户端中间件，并将其应用于一些api路由 我正在使用Vue和axios 如何获取和设置访问这些受保护api路由所需的令牌？Laravel文档确实不清楚“使用您自己的api”。我也在谷歌上搜索了几天，甚至订阅了Laraca

我有一组单选按钮，希望设置正确的选择。我有一个valuefinancing.is_reamortizable，它应该反映最终用户是否点击了它。我如何/应该通过computed属性或其他选项绑定或检查 <div class='row both10'> <div class='col-md-4 input-group'> Reamortization Available: </div> <div cl

我正在节点js上创建vuejs应用程序，并希望将moqui作为RESTAPI调用。所以我只想知道是否有任何机制可以从vuejs调用，它将通过返回令牌来验证用户凭据，因此下次它将仅通过令牌授权用户。我是否正确理解您希望将临时api密钥传递给其他rest调用 如果是这样，请查看runtime webroot文件夹中的rest.xml屏幕。这里有很多例子

我正在使用VUEJSV.2.4.4并尝试配置插件 我有一个行列表，我正在尝试使用perPageValues选项限制它们，以下是我的选项： options: { filterByColumn: false, filterable:['nickname','email','reg_date','year'], perPage:100, per

我最近更新了最新版本 创建并运行项目后， 它将显示消息 您可以使用特殊注释来禁用某些警告 使用//eslint禁用下一行忽略下一行 使用/*eslint disable*/忽略文件中的所有警告 但是我应该把这些评论放在哪个文件中呢 我的根文件夹上只有package.json/package-lock.json和.gitignore 是否必须创建.eslintrc？您可以将/*eslint disable*/放在vue文件中，以忽略该特定文件中的eslint检查。您可以创建一个.eslintr

我收到部件创建周期的这些数据： {title: ‘any title’, type: ‘medical’, id: ‘mongo objectid here’} 我让我的q-select传递标题和id给它。但是，如何在select的更改事件中获取第三个属性/参数以获取类型值？ 示例：我想在我选择的更改事件中获取所选选项的值，并在某处获取类型。换句话说，类似于： <select> <option value="any value" type="medical">An

当我构建我的项目时，我找不到任何css文件。不像他说的那样 我有三个文件：umd、umd.min和common。 联合国信息：“省略图像和其他类型的资产” 是否有特殊的vuecli配置要执行 我遇到了这个问题，因为我在项目中添加了单元测试我最近遇到了同样的问题，以下解决方案对我有效： 在我的例子中，在app条目中导入CSS文件，src/app.vue： import'/assets/scss/main.scss' 将package.json文件中的build命令更改为以导入样式的条目文件为目标：

有人可以帮我用v语句循环这样的布局 在这种情况下如何使用v-for？看起来您在模板中加入了一些逻辑，并使用了三个循环实例 <div id="app"> <h2>Product:</h2> <div class="row" v-for="(sparator, index) in products" v-if="index % 5 == 0"> <div class="col col-6" v-for="(product, ke

出于某种原因，发出的事件不按父组件处理 HTML: <template id="parent-template"> <div> <h1>Parent: {{message}}</h1> <child-component message="Child message"></child-component> </div> </template> <template

如果我想禁用每个星期一或每个星期一和星期二，那么如何在元素ui的日期选择器中禁用 我找不到关于禁用一周中几天的文档 data（）{return{calendarOptions:{disabledDate:function（time）{return time.getTime（）

这是我的目录结构的一个片段： 我在“公共”目录下有一个歌曲文件夹，里面有一堆mp3文件。 我想让我的vue应用程序播放该文件中的随机歌曲 除了动态地获取（mp3文件的）路径外，一切都差不多解决了 例如，如果我的public/songs目录中有以下文件-song1.mp3、song2.mp3和song3.mp3，我如何在vue js-[“song1.mp3”、“song2.mp3”、“song3.mp3”]中获取列表 谢谢您需要让web服务器发布可用歌曲列表。但是，我想这与vue没有任何关系。您

这不是这些： 我正在构建一个小型SPA，所以我从这个基本原则开始，我测试并构建到下面的代码中，我遇到了一些问题。只有在我调用DOM中的次要属性（为什么？？）时，它才会起作用，我将它包括在内，以说明我从何处开始，希望这些原则能够随着我的构建而转化 JS: var-app=新的Vue({ el:“#应用程序”， 计算：{ 今天：函数（）{ 返回新日期（）.getTime（）； }, 明天：函数（）{ 返回this.today+（1*24*60*60*1000）； }, }); DOM: {{今天

我尝试在没有激活器的情况下使用Vueties v-dialog，并使用Vuex的状态管理以编程方式打开列表中每个项目的对话框。我还尝试使用单文件组件。我有一个生成卡片组件的v-for，每个都有一个子组件，即对话。卡组件具有来自mapGetters的modalState计算值。该卡有一个@click，调用一个操作来改变modalState，子组件使用v-model“modalState”。我现在已经做了一些变化，最新的创建了与卡片一样多的对话框，并且从不更改modalState，我想我需要一个se

我有一个Vue2项目和Vuetify，我正在使用Jest对我的代码进行单元测试。我开始测试一些示例代码，但我无法通过Jest确定Vuetifyv-alert组件是否可见。我已经尝试了内置的Jest方法以及添加Jest dom和使用tobeviible（）方法，但到目前为止没有任何效果 如果查看Test.vue组件，默认情况下会隐藏v-alert组件。（其样式设置为display:none；） 单元测试显示应该通过的是expect（alert）.not.tobeviible（），但无论v-aler

我这里有一些代码，我想检查页面的源代码，看看它是否正常工作，但在源代码中我看不到任何东西 export default { name: 'LandingPage', metaInfo() { return { title: this.page.title, meta: [ { property: 'og:title',

如果所有字段都不符合要求的条件，如何有条件地禁用Vuelidate表单的“提交”按钮 我尝试了下面的方法，但是：disabled在那里只接受disabled这个词 用户名： 密码： 登录 当前，您正在将禁用绑定到$v.form.valid（）返回的值，该值仅在呈现组件模板时运行一次，并且在该点之后不会更改 从中，似乎为表单模型提供了一个$invalid属性，该属性： 指示给定模型的验证状态。当选项中指定的任何子验证器返回falsy值时，变为true。对于验证组，将考虑所有分组的验证