我是Vue.js新手，在使用带有子组件的组件时遇到了一些问题。我有以下.vue文件 app.vue 创建你的MIA slider.vue {{*标题} 一些内容 从“/skin”导入皮肤； 导出默认值{ 组成部分：{ 皮肤：皮肤 } }; 皮肤.vue 导出默认值{ 数据（）{ 返回{ 标题：“选择肤色” }; } }; 我正在尝试将蒙皮子组件加载到组件中。除了皮肤子组件之外，其他一切都很好，因为它没有被编译。不过，我没有收到任何与编译或vue相关的错误。我还希望能够有几个这样的滑块

我正在使用vue@2.1.3以及构建应用程序的方法 在本地开发时，我经常看到警告uncaughttypeerror:cannotreadproperty。。。未定义的，但可以成功呈现HTML。但是，使用npm run build命令将HTML部署到Netlify时，无法呈现HTML。所以我必须认真对待这个警告 我从中了解到，这是因为“当呈现组件时，数据不完整，但从API加载数据。”解决方案是“使用v-if仅在加载数据后呈现模板的该部分。” 有两个问题： 我试着用v-if来包装生成警告的多个语句，

我有一个自定义组件blog，我用一个手风琴（来自vuetify.js）显示博客中的帖子（在ul>li结尾），使用第二个自定义组件博客帖子。我在没有筑巢的情况下试过，效果很好。有了自定义组件的嵌套，我只能展开和关闭第一篇文章 这是代码。blog.vue的模板： <template> <v-content class="blog"> <v-container fluid> <v-row> <v-col xs

我误解了将子组件传递给其他子组件的文档 我有两个部分 index.html <main-categories-products source="{{ url('api/products') }}"> </main-categories-products> <sidebar-options> </sidebar-options> MainCategoriesProducts.vue import Vue from 'vue' var bus =

当我删除一个组件时，遇到了一个问题—删除后创建的任何组件，然后重新创建。有问题的组件将被删除，并在删除后创建子组件，然后重新创建 这有什么原因吗 小提琴代码： Vue.component('column-component', { props: ["columnData", "uniqueId"], mounted: function() { console.log('mounting column: ' + this.uniqueId) },

我有vuetify网页包项目 在我的一个vue组件中，我使用v-select with:items设置为名为“levels”的数字的公共数组，v-model设置为保存公共数字的数据属性“level” 因此问题在于，如果“级别”用prop初始化，则v-select在启动时不显示初始值，如果“级别”用常量初始化，则显示ok。Smth是这样的： props: ['initLevel'], data () { return { levels, level: thi

我正在尝试设置从一个vue2组件到另一个vue2组件的引用，如下所示： new Vue({ el: '#app', components: { 'foo': {template: '<p>Foo</p>'}, 'bar': {template: '<foo />'} } }); 有没有一种简单的方法可以让本地定义起作用，或者我应该继续使用全局定义的组件？bar不了解foo。您已经定义了一些东西，以便您的主Vue实例了解这两个方面，

我正在使用getter将存储值设置为变量，当我稍后更改变量值时，vuex存储值正在更新 下面是我的代码 let startdate = this.$store.getters.getDateRange.start let endDate = this.$store.getters.getDateRange.end let compareStart = startdate compareStart.setDate(startdate.getDate() - 7) let compareEnd =

TL；DR：是否可以将内容从子组件传递到父组件中引用的组件的特定插槽？ 我使用的是附带的，它提供了开箱即用的单页应用程序的基础 我面临的问题是，我有一个主布局，简化如下： <template> <div id="app"> <Nav/> <APageWithDifferentNav/> </div> </template> <script> import Home from "./c

下面是我的代码。我想使用“select”标记，并从脚本中呈现选项及其值。我使用了“v-bind:value”来呈现脚本中的值。但是有一个错误，比如***“ 迭代中的[eslint插件vue][vue/require-v-for-key]元素 希望有“v-bind:key” 指令。”*** 因此，我这样给予**” {{option.text}” 如果我从代码中删除了“v-bind:value”，那么我就无法在UI中获得选项值。我想纠正“v-bind:key”的错误，我想知道这两者之间的区别。请帮忙

我试图将一个函数传递到我的组件中，并且不断地返回这个错误。“无效的属性：属性“form_type”的类型检查失败。需要数组，得到函数。“我的函数返回一个数组，所以我有点不知道如何修复此问题。” 我引用的函数是selectedType&所涉及的组件是ChildTab <template> <div class="row"> <q-field

我有一个“拒绝访问”错误，只有在我的web应用程序中的某些用户尝试登录用户用户名/密码时才会出现该错误。 使用授权扩展为VueJS 2.0 SPA使用auth0 js 9.3.3插件 我在Auth0的日志窗口中得到以下响应。如何调试此类错误并查看原因 这将导致access_令牌和id_令牌为空 { “日期”：“2018-06-03T11:15:15.478Z”， “类型”：“f”， “描述”：“JSON中位置19处的意外标记{”， “连接”：空， “连接id”：“， “客户id”：“1ySh5N

我正在关注Vuejs文档，并尝试使用click事件发出一个值 守则如下： Vue模板： <div id="app"> <div class="container"> <div class="col-lg-offset-4 col-lg-4"> <sidebar v-on:incrementBtn="increment += $event"></sidebar> &l

我有一个通过插槽传递内容的组件。我正在使用一个渲染函数来输出内容。我之所以使用渲染函数，是因为我想多次复制内容。当我使用此代码时，一切正常： render(createElement){ return createElement('div', {}, this.$slots.default); } 当传递的数据改变时，输出也会改变 但是，由于我想复制插槽内容，我现在尝试以下操作： return createElement( 'div', {}, [

我使用Vue Native并尝试更改主题。但是StyleProvider没有接受主题，并抛出警告“失败的道具类型：提供给StyleProvider的类型数组的道具样式无效，预期对象”。我做错了什么 <template> <nb-style-provider v-bind:style="getTheme(material)"> <nb-container> <nb-text>Contact</nb-text> </nb-contai

如何从Vuetify Datepicker中仅选择年份 我需要一个下拉列表，只选择年份YYYY 但是默认的Vuetify日期选择器选择整个YYYY-MM-DD格式 我在日期选择器的源代码中看到，year类型已计划好，并将在将来实施。源代码道具： 但我可以通过解决方法无标题，防止日期选择器切换到月/日窗口并关闭v菜单，来实现这一点。您可以看到工作示例- 如果需要，您还可以使用格式化标题和标题来获得更好的结果。使用类型道具不支持此功能 但是一个解决方法是将this.$refs.picker.act

我正在制作一个产品页面和购物车页面，当我点击Addtocart按钮时，我希望将产品添加到购物车页面。现在我是一个没有数据库的wokring，所以我只想创建一个cart数组，每当我点击按钮时，该数组就会附加该产品 //this is product page <template> <div class="container"> //here i am listing the products <div v-for="product in produ

我在Vue.js中使用，一切正常 但是，我还想预呈现404页面，在Vue中，该页面如下所示： { 路径：'*'， 名称：'FourOhFour'， 组成部分：FourOhFour } 使用该插件，我想添加404，如下所示： routes:['/'、'/contact'、'*']， 但在尝试这一点时，我得到： [prerender spa plugin]中出错，无法预渲染所有路由 谢谢。根据这一点是不可能的 你可以像这样编辑你的路由器代码 path: '/404', name: 'FourO

我有一个大约1k…10k元素的数组，必须进行处理。 阵列正在以Vuex状态存储。 用户应该能够处理单个元素或所有元素。 起初，当数组非常小时，我使用变异处理单个元素，使用动作处理所有元素。 所以代码是这样的： 新建Vuex.Store({ 声明：{ 数组：[el1，el2，el3…] }, 突变：{ processEl：（状态，el）=>{ ... } }, 行动：{ processAll:context=>{ context.state.array.forEach（el=>context.co

我有一个Guestbook组件，我已经将它分为符号和视图组件。 我希望通过我的主留言簿组件和我的子视图组件传递或更好地共享条目数据，但我不知道如何实现这一点 我有以下代码： /src/components/Guestbook.vue index.js 预期（至少其中一个）： 结果: get entries attempt #1 get entries attempt #2 get entries attempt #1 get entries attempt #2 TL；博士： 我用自

在vue.js中，我有 <button v-bind:class="[mdc-tab, {index==currentTab : mdc-tab--active}]" role="tab" aria-selected="true" v-for="(tab,index) in tabs.data" v-bind:key="tab.id"> <span class="mdc-ta

我想将所有状态数据映射到本地计算属性，实现它的一种方法是 computed: { ...mapState([ 'data1', 'data2', ... ]), }, 但是，如果有许多数据要传递，是否有一种简单的方法可以将所有状态数据映射到本地计算属性

我只是想说我不久前就熟悉了vue。 现在我有个问题 我从服务器获取数据 //商店 从“../services/PostService”导入PostService export default { state: { posts: [], }, actions: { async getPost() { const response = await PostService.fetchPosts(); console.log(response.dat

我有一个名为monRaw的数据变量，它是一个时刻对象，表示当前星期的第一天： ... data() { return { monRaw: moment().startOf('isoWeek') } }, ... 然后，我有一个名为weekTitle的计算属性，该属性与一些文本一起显示（它比我的项目中的要多，但我在这里简化了它）： 最后，名为viewNextWeek（）的方法将我的数据变量更改为下一周的第一天： ... methods: { viewNextWeek: fun

我正在开发vue2+nuxt应用程序，并使用vuex+持久状态包。在其中一个组件中，我使用基于状态布尔变量的条件显示div： <template> <div class="nav__topbar" v-if="show"> .... </div> </template> <script> export default { computed: { show(

我知道在Vue实例中不应该使用箭头函数。但在操作中，甚至在vuex文档中也使用了它们 尝试从媒体使用此示例，但出现语法错误 模块生成失败：语法错误：意外标记，应为 src/store/projects.module中的代码。这里只更改了变量名。所以我对这个语法错误有点困惑 const actions = { [FETCH_PROJECTS] (context, payload) { context.commit(FETCH_START) return ApiService

我在vue.js中工作，使用axios向服务器发出请求。我已经配置了一个拦截器来向请求添加授权令牌。生成令牌的函数需要完整的url和协议来创建正确的令牌。我已经创建了我的axios实例http。 如果我在http调用中使用完整的url:http.get（'http://ediscore.net/api/config/category“它工作得很好。但是如果我在axios级别设置基本URL:const http=axios.create（{baseURL:”http://ediscore.net/

出于SEO目的，我需要用php呈现html元素。例如，我有这些元素 <?php foreach ($elements as $key => $element): ?> <select name="first" v-model="model[<?= $key; ?>]"> <option value="">Select</option> <option value="1">Some

我有一个要求，在应用程序启动时，我们必须进行Axios调用并获得一些值。这些值应该对所有应用程序都可用。。。它们是服务器端的一些元数据，应该在应用程序初始化期间只提取一次。。。 我在插件中定义了一个mixin，希望在组件中得到值。在这种情况下，我应该在哪里调用axios？在mixin或插件内部 import Vue from 'vue' import Axios from 'axios' const StudentCoinPlugin = { install (Vue, option

我在这个I am applicated inspect v-data-table类中使用Vue.js 根据我给出的样式，但没有应用 .v-工具栏标题{ 颜色：靛蓝； } v-data-table-header{ 背景：rgba（0,0,0,05）； } t车身tr:n类型（奇数）{ 背景色：rgba（0,0,0,05）； } 您需要使用：：v-deep来更改范围样式 试一试 阅读更多关于深度选择器的信息-.v-toolbar_uutitle{color:indigo；}：：v-deep v-d

当我对类组件使用provide/inject时，一切都按预期工作。但是当我在正常的vue组件中使用它时，我会得到类型错误 在本例中，我在引用this.testService时出错。但代码仍然有效 export default Vue.extend({ name: "HelloWorldBasic" as string, inject: ["testService"], computed: { message(): string | null { return t

我使用的是Element UI单选按钮组，我想在触发更改事件时使用preventDefault： 脚本： 方法：{ changeHandlervalue，e{ //e是未定义的 //这里应该是默认值 } } 我尝试设置第二个参数来更改函数，但它未定义。方法中的参数有误。使用@change事件处理程序有两种方法： A. 定义不带参数的更改处理程序，如 <el-radio-group @change="changeHandler" v-model="radio1&

我想在v-data-table中创建一个下拉菜单 <v-data-table :headers="headers" :items="res" :options.sync="options" :server-items-length="totalRes" :loading="loading" loading-text="Loading ..... Please wait" :footer-props="{

全球NPM依赖性让我有点紧张。多年来，我开发了几个需要稳定、可重建的应用程序。像@vue/cli这样的工具最初很不错，但我担心随着时间的推移，该工具会更新，但我构建的产品仍然需要早期版本。因此，理想情况下，它们的所有依赖项都将被指定并包含在项目文件夹中@vue/cli设计为全局安装，然后生成package.json文件，指定一组附加的@vue/cli dev依赖项。我尝试在本地安装@vue/cli，但只有在父容器目录中安装@vue/cli时才起作用，这在monorepo设置中不起作用。（Lern

我正在使用以下教程（NPM包的pull download stats）为我的图表Web应用程序建立基础： 我已经从教程中提取了下面的代码，并对其进行了修改，使其具有纯粹的基础知识。获取数据并呈现数据。具体而言，从这些： 请注意：代码执行API调用并检索数据没有问题。但是，如果我更改代码，它将只在图表中呈现该数据。例如，将线条的颜色更改为其他颜色。它似乎只在下一个“周期”起作用，如果这有意义的话。数据呈现后，如果刷新该页面，它将再次为空。我怀疑这与网页的时间安排有关。然而，我不知道

因此，我一直在尝试在vuetify中创建一个具有特定布局的V卡。卡的顶部大小会有所不同，因此我需要能够将卡的底部与底部对齐 因此，我尝试在这里执行以下代码，这应该允许第一部分“增长”以填充高度，然后第二部分“收缩”并停留在底部 然而，没有成功。。我可能只是做错了点什么，但我正在拔头发 这是我的密码： <v-card shaped color="white" height="100%" width="100%"> <v-container fluid> <v-la

我正在实现一个用户配置文件编辑页面，该页面最初由从vuex存储加载的数据组成。然后，用户可以自由编辑其数据，并最终将其存储在存储区中 由于用户也可以单击“取消”按钮恢复到其原始状态，因此我决定创建从存储中获取的用户数据的“本地”视图副本。这些数据将保存在视图中，一旦用户按下save，它们将保存在存储中 视图如下所示： <template class="user-profile"> <v-form> <template v-if="profile.avat

在Vue组件中使用时，我不理解引用。它不能正常工作。。我有两个文件 show.vue <template> <div> <b-container fluid class="bg-white" v-if="chart"> <b-row class="topTab types"> <b-col :class="{ active: currentTab === index }"

这是我的代码： <template> .... <v-navigation-drawer app absolute width="340" permanent> .... <v-btn fab dark fixed bottom left color="primary" @click="$vuetify.goTo(0)"> <v-icon>keyboard_arrow_up</v-icon>

当前正在尝试在“选择”选项中向我的背景图像添加动态url。但它似乎破碎了，不知道这是怎么发生的，也不知道如何修复。寻找不同的组合，如“或”甚至。但是真的很困惑 {{country.country_code} 这就是你使用的代码吗？如果是这样，那么问题似乎在url请求的引号内 你有 :style="{backgroundImage: 'url('https://www.countryflags.io/{{country.country_code}}/flat/64.png')'}&qu

我想问一下，当字段包含数字时，如何禁用按钮？ 我的示例代码是： disabledSubmitButton() { return this.$v.$error || this.firstName === '' || this.lastName === '' || this.birthDate === '' || this.province === '' || this.$v.birthDate.$error || this.city === ''

如何在Nuxt.js上使用eventHub？ 我们通常在main.js中设置eventHub，如下所示： 导出默认值{ 名称：“应用程序”， 数据（）{ 返回{ eventHub:新的Vue（） }; }, 提供（）{ 返回{ eventHub:this.eventHub }; } }; 现在的问题是nuxt不是main.js，如何在nuxt中配置eventHub？在nuxt中实现这一点的最简单方法是创建一个注入事件中心的自定义插件 在“plugins/”目录中创建一个名为“eventHub.

我想在Nuxt页面中测试“layout”方法。结构如下。我简化了代码，以便更好地解决这个问题 导出默认值{ 布局（{isDesktop}）{ 返回'default/${isDesktop？'desktop'：'mobile'}/index`； }, 总目（）{ 返回{}； }, 名称：'PageName'， 元：{ anyMetaProperty:true }, 数据（）{ let component=import（`~/path/to/the/child/component`）； 返回{

因此，逻辑按预期工作，但我的复选框在单击时不会在状态之间切换。据我所知，v-checkbox不需要设置v-model或值。我所需要的只是VisualCheckBox效果 <v-list-item-group> <template v-for="(item, index) in items"> <v-list-item :key="index" :to="{

我正在将组件从常规的VUE3合成API重构为脚本设置语法。起点： <script lang="ts"> import { defineComponent, computed } from 'vue'; import { mapGetters } from 'vuex'; export default defineComponent({ name: 'MyCoolBareComponent', computed: { ...mapGetters('

这对vue.js单个文件组件或全局组件（vue.component（））也有效（相同）？或者它仅用于Vue实例（新Vue） 谢谢。是的，这些生命周期挂钩适用于所有vue实例：SFC、全局组件、显式新vue、vue测试utils包装等 SFC所做的唯一一件事就是为您编写.render方法，因为使用类似html的语法编写它比手动编写render函数更简单 在证券及期货事务监察委员会中，你可以这样利用它们： <script> export default { created() {

为什么它最终会输出一个空数组？我尝试了所有版本 Main.vue 从“./List.vue”导入列表 导出默认值{ 数据（）{ 返回{ 信息：{} } }, 组成部分：{ 列表 }, 创建（）{ this.info={'first'：'1'} } 当“console.log”应显示{'first'：'1'时的文件 List.vue 导出默认值{ 数据（）{ 返回{} }, 道具：['info']， 创建（）{ console.log（this.info） } 如果你使用这样的方法，反应性就会

我有一个非SPA（多页应用程序）。在一个页面上，我使用带有多个选项卡的vue.js组件。我用VueRouter控制这些选项卡。实际上，一切都很好 我正在使用vue 2和vue路由器3 我直接在单文件组件中定义路由器，如下所示 <script> // import Vue from 'vue'; import VueRouter from 'vue-router'; export default { name: 'ProductDisplay', router: new Vu

我需要在vue.js中连接两个过滤项 这怎么可能呢？这个应该能用 资料{ 返回{ fullDate:“${this.$options.filters.dateFormatthis.startDate}-${this.$options.filters.dateFormatendDate}”， } }, 或者Alberto建议的计算变量，如果您的数据发生更改，将重新计算此变量，数据不会更改 计算：{ 完整日期{ 返回`${this.$options.filters.dateFormatthis.st

我在Nuxt.js中创建了一个博客，它对我的文章使用降价。在写我的第一篇文章时，我意识到我不能在我的assets文件夹中的降价文章中包含图像。仅当它是以下示例中的链接时，它才起作用： 降价图像： 如何在此位置在Nuxt.js标记中插入图像assets/images/blog/trees.png看起来相对路径当前不可用： 将图像放入/static目录后，应仅使用绝对路径  看起来相对路径当前不可用： 将图像放入/static