javascript - 我如何在 Vue.js 中从子组件访问父组件的方法？

我正在尝试在 Vue.js 的子组件中调用父组件/根组件的方法，但我一直收到一条消息，提示 TypeError: this.addStatusClass 不是一个函数。

Vue.component('spmodal', { props: ['addStatusClass'], created: function() { this.getEnvironments(); }, methods: { getEnvironments: function() {

阅读更多 →

javascript - 如何在 Vue 组件命名空间中定义可重用函数

这是我的代码：

Vue.component("ro-webview", { props: ["src"], template: `<div> <div> <div class="col-md-2 list-inline"> ${this.getIcon("fa-arrow-left")} ${this.getIcon("fa-arrow-right")} ${this.getIcon("fa-refresh")} </div> <input class="col-md-10" :value=

阅读更多 →

javascript - import Vue from 'vue' 会向不同的文件导入“不同的”Vue

这个问题可能更多地关于 Webpack 和 ES6 import，而不是关于 Vue。

我正在编写一个 Vuex mutation，它向 state 中的对象添加一个新的 mykey: []。这需要使用 Vue.set(state.myobj, 'mykey', [])，以便新数组获得响应性。

然而，当我在 mutations.js 中 import Vue from 'vue' 并使用 Vue.set(...) 时，它并没有解决问题（只是没有任何作用）。问题似乎在于 Vue 不是我在 main.js 文件中创建 Vue 对象时使用的同一个 Vue。

我已经确认问题与 Vue 导入到 mutations.js 的方式有关。如果我在 main.js 中写 window.MY_VUE=Vue，然后在

阅读更多 →

javascript - Vue.js 调试信息问题

我使用 Vue.js v2.5.1 为前端构建了一个 Web 应用程序。这个应用程序总体运行良好，但当出现问题时，抛出的错误信息总是只引用 Vue.js 的代码本身，而不是我代码的部分（我认为可能是我的模板中的某些内容），而这些部分无疑才是问题的实际来源。

这里有一个例子：

Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node." warn @ vue.js?v=1:4

阅读更多 →

javascript - Vue.js 添加和编辑使用相同的表单

我是 vue.js 的新手，我正在尝试扩展一些我已经完成的教程。我已经为此挣扎了三个小时，现在感到很沮丧。顺便说一下，我在使用 firebase，但我不确定这在这里是否真的重要。

所以，我有一个用于列出电影的 CRUD 应用程序（我告诉过你它很基础！）。页面顶部有一个表单，可以添加电影，下面有一个表格，用于列出新增的记录。这运行得很好。

我在表格的每一行上添加了编辑和删除按钮。删除功能可以正常工作。但是编辑功能有问题。

我想在初始表单上使用 v-if，以触发不同的方法（保存、编辑）并显示不同的按钮（添加、保存、取消）。

我不确定如何访问这些对象来执行此操作，我尝试了几件事，但 v-if 提示对象未定义。

感谢您的阅读，如有任何

阅读更多 →

javascript - 使用 VueJS 将 JSON 对象显示为表格

我一直在尝试使用 VueJS 显示从我的 Laravel 应用获取的 JSON 对象，该应用正在处理我的服务器端操作。任何形式的帮助都将不胜感激。

这是我 Laravel 应用的原始 JSON 数据：

[{ "1": 1, "2": 2, "3": 3, "4": 4, "5": 5, "6": 6, "7": 7, "8": 8, "9": 9, "10": 10, "11": 11, "12": 12 }, { "1": 70000, "2": 66524.45, "3": 62736.11, "4": 58606.81, "5": 54105.88, "6": 49199.86, "7": 43852.3, "8": 38023.47, "9": 31670.03, "10": 24744.79, "11": 17196.27, "12"

阅读更多 →

javascript - <transition-group> 如何与 Vue 组件一起使用？

假设我想使用这些组件制作一个点击后会消失的列表，并使用transition-group来实现动画部分。

以下代码可以表现良好：

HTML ：

<transition-group name="testanim"> <p key="1" v-if='open1' @click='open1 = false'>Can You See Me?</p> <p key="2" v-if='open2' @click='open2 = false'>Can You See Me?</p>

阅读更多 →

javascript - Vue.js 路由查询数组

我正在尝试使用 Vue.js 和路由器将数组从查询传递到后端。

所以我有这个方法：

submitForm () { this.$router.push({ name: 'AuctionResult', query: { models: this.selectedModels.map(e => e.value) } }) },

结果将是这样的查询：?models=MODEL1&models=MODEL2... 但我如何才能让输入看起来像数组，像这样：?models[]=MODEL1&models[]=MODEL2... ???

阅读更多 →

javascript - 使用 vuex v-model 指定对象值

我正在协调输入元素与 Vuex 状态中对象的键。假设我有这个对象：

myObj: { foo: 1, bar: 2 }

以及组件中的一个计算属性：

myObjVals: { get(){ return this.$store.state.myObj }, set(//?) { //? }, },

在模板中，我可以从商店获取值：

<input type="number" v-model="myObjVals['foo']"/> // displays "1" <input type="numbe

阅读更多 →

javascript - Vue.js 列表中更改选定元素时的过渡

我有一个个人资料列表，可以打开“编辑个人资料”屏幕。这个屏幕从左侧滑入。当我选择一个个人资料时，如果已经有屏幕被选中，我希望它先滑出，修改选中的个人资料数据，然后再滑入。

现在发生的是：当我第一次选择一个元素时，屏幕会滑入。当我更改选定的元素时，屏幕保持不动，不会滑出然后再滑入。

这里有一个动图来展示它现在的行为：

我的代码是：

Vue 方法：

editProfile: function (index){ // this.editingProfile = false; this.setProfi

阅读更多 →