问题标签 [vue-component]

当单击其子组件之一中的按钮时，我正在尝试获取一种在父组件上执行的方法。我在 Webpack 中使用单个文件组件。这是子组件的代码：

和父母的代码：

该count组件只是一个显示total变量的 h1 元素。当我单击按钮时，“foo”会记录到控制台，但“bar”不会，总数也不会改变。关于我做错了什么的任何想法？提前致谢！

如果我从我的 main.js 导入我的模块：

在这个例子中，我需要在我的 component.js 中重新导入 VueResource 吗？

如果不是，我不明白为什么我想在我的 component.js 中使用 vue ressource 时出错：

组件.js：

我正在学习 Vue.js，但我不知道为什么 <li>{{task.body}}</li>没有显示在屏幕上。

我已经创建了<tasks v-for="task in tasks"></tasks>组件，它需要从父母那里访问数据。

见：https ://jsfiddle.net/pd03t1vm/

HTML：

JS：

试用 VueJS 2.0 RC，并使用 fetch API 为某些组件加载一些数据。这是一个模拟示例：

该data对象是一个全局应用程序状态，在应用程序初始化之前定义，并且组件中只需要它的一个子集，因此是该部分。组件数据的主要集来自我试图调用的另一个端点。但是，该data属性需要一个对象，并且它正在返回一个 Promise，它不能在模板中的循环上下文中真正使用以进行渲染等（例如v-for="record in records"）

我会以错误的方式解决这个问题吗？完全获取数据records属性后，更新数据属性的方法是什么？有没有办法强制代码停止，直到承诺解决（有效地使其同步）？无论如何，如果没有数据，该组件将毫无用处，因此无论如何都要等待一段时间才能使用它。

在不使用 vue-async 或 vue-resource 等插件的情况下异步填充组件数据字段的正确方法是什么？

（我知道我可以使用非承诺 ajax 调用的 XHR/jQuery 方法来做到这一点，但我想学习如何使用 fetch 来做到这一点）

更新：我尝试定义一个创建的钩子和一个加载数据的方法，就像这样但没有骰子 - 在我自己的实验中，记录属性一旦加载就无法更新。即使数据已成功获取（成功登录到控制台），它也不会改变。

使用 vue-router 和我正在处理的组件在单击链接时触发可能与我有关，而不是作为常规的 Vue 组件。进一步调查...

更新#2：如果我继续调查上面的 jsfiddle 方法并记录this.records到response.payload控制台，它会显示正在填充的记录对象。但是，这似乎不会触发模板或组件本身的更改 - 使用 Vue 开发工具检查，records 属性仍然是一个空数组。事实上，如果我在logstuff调用它的模板中添加一个方法和一个按钮，然后让这个方法登录this.records到控制台，它会记录一个带有空数组的观察者：

现在我想知道为什么组件的 data 属性即使在显式设置为另一个值之后也不会更新。尝试设置一个$route触发该reload方法的观察者，但没有骰子 - 该路由的每个后续加载确实重新发出提取，并且控制台记录this.records为填充（从提取中），但“真实”this.records仍然是一个空数组.

我已经使用 vue-router 为简单的事件系统设置了一个组件系统。我希望能够使用相同的组件来编辑现有事件和创建新事件。

当我想从编辑一个事件导航到创建另一个事件时，我不知道如何从组件中删除数据。

我尝试了以下方法，但不起作用：

• 在 v-link 中设置 eventId: null
• 通过 v-on:click 将 eventId 设置为 null
• 设置 eventId 为：this.$route.params.eventId

Router Map：create 和 eventDashboard 路由指向同一个组件。

这是用于创建新事件的按钮：

和组件：

我不知道如何使用 $dispatch 方法将数据从 Vue 子级发送到 Vue 父级。我有一个包含多个实例的组件，如下所示：

我的 Vue 实例看起来像：

我有“收据”组件的多个实例，因此从组件的计算“总计”函数计算出多个值。如何调度组件实例“总计”函数的值并在父实例中获取我的“总计”

我正在使用 vuejs，我想知道如何控制输入（必要时添加禁用属性）。有没有办法在 vuejs 中添加动态属性？在我的Textfield 组件下方：

用法：

在控制台中将 laravel elixir 升级到 6.0 版本后，出现如下错误：
[Vue warn]: Attributes ":model.sync", "key", "name" are ignored on component <wysiwyg> because the component is a fragment instance:.
我已经阅读了这个vue 文档。
虽然我使用了 laravel-elixir 5.0，但一切都很好。
另外，我在 webpack 上更改了 browserify。组件的模板包括使用：

我该如何解决这个错误？

描述（tl；博士）：

当我通过 将“对象的对象”从 vuex 的商店传递给组件时v-model，模型的修改会产生错误。只有当“对象的对象”通过时。对于任何其他类型，一切都很好。

当我告诉“对象的对象”时，我的意思是这种结构：{'A': {name: 'first'}, 'B': {name: 'second'}}.

工作流程和结构：

• 结构：view (page)-> parent-> child;
• 查看Object从商店获取一个并将其传递给组件（-> parrent-> child）；
• 不允许使用 " .sync"，因此组件不应改变存储中的对象；
• 更改后child，child必须将结果返回到parent，parent到view，并view应通过 vuex 的 setter 保存；

错误消息：

吸气剂（来自商店）：

查看（页面）：

父组件：

子组件：

PS我认为问题的发生是因为对象通过引用传递。但是如何对抗这个错误呢？

我正在开发一个大型 Vue.js 应用程序，我在我的应用程序中使用broadcast了dispatch很多地方。坐下来改变所有这些的最佳方式是什么？还是我有其他方法来处理这些重大变化？