问题标签 [vue-reactivity]

在创建组件之前，我的初始化数据有问题。我的实际问题取决于这个问题：我在我的一个数据属性中失去了反应性，因为我在生命周期挂钩中对其进行了初始化。但我不知道如何data(){}用我从道具收到的长度初始化一个数组。如果我在生命周期钩子中完成它，那么我将失去反应性，正如我之前提到的。以下是有关我的组件的更多详细信息： 在我的 Vue.js 学习中，我正在尝试实现一个步进器组件。我决定让它更具动态性并具有灵活的尺寸。因此，在我的步进组件道具中，我收到了一个具有这种结构的对象：

比在我的步进器组件中，我使用一个steps字段来确定另一个数组的长度，该数组保存有关标记或未标记步骤的数据。这是我用来初始化标记步骤数组的代码：

标记步骤是一个空数组，data(){} 因此，在那之后，我有一个错误值数组。在我的模板中，我有一个v-bind:class

多亏了它，所有步骤都没有标记，并且在用户单击“下一步”按钮后它们可以被标记。

my-btn 是我的简单按钮的包装组件。nextStep() 中的代码：

但是，当我单击按钮时，尽管单击按钮后，markedSteps[i] 的实际值已更改为 true，但并未像我预期的那样分配标记圆圈类。我对这些我搞砸的东西感到非常沮丧。任何帮助将不胜感激。我已经检查了有关此主题的文档，并且我已经阅读了“深度反应”部分，但我没有看到答案。

我有一个用户列表，我正在尝试添加一个图标来启用/禁用他们的帐户。所以我在 v-for 循环中呈现用户列表。我使用循环索引索引的数组跟踪每个图标上徽章的可见性。

我遇到了一个奇怪的问题，除非我更新其他一些虚拟变量，否则 Vue 无法识别对数组值的更改。这是一个 Vuetify 问题吗？还是只是 Vue 反应性问题？

我创建了一个 Codepen 来显示我的问题。 https://codepen.io/DedicatedManager/pen/eYmZRQo?editors=1010

Javascript

我刚从 vue 开始，我在下面给出了一个问题，我不知道为什么没有显示 api 数据。

vue.runtime.esm.js?2b0e:619 [Vue 警告]：属性或方法“结果”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

vue.runtime.esm.js?2b0e:619 [Vue 警告]：属性或方法“searchValue”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

这是我的代码：

因此，我正在构建一个动态表单生成器，它基于在data()as中创建的对象生成表单form: {}，然后设置问题键/值对，beforeMount()其中绑定到使用v-bind.sync.

我希望能够在form: {}页面上看到键/值对的更改，但由于键值对是动态生成的，因此它们不是反应性的。

当我登录时this.form，我可以看到对象值的更改，但我认为我缺少一个让它们在页面本身上刷新的功能：

父组件，其中设置了空的表单对象：

该DynamicForm组件发出如下：

单击此处在 GitHub 上查看此项目

我正在 vuejs 中创建一个滑块，并使用vue2-dropzone 插件进行文件上传，其中每张幻灯片 ( slide-template.vue) 都有一个vue2-dropzone组件。

当应用程序加载时，图像文件被手动添加到从图像 API（托管在 heroku 上）查询的每个vue2-dropzone（manuallyAddFile插件 API）中

问题是当我删除第一张幻灯片时，从子（）组件调用父级（slider.vue）方法removeSlideFn（作为道具传递给子级slide-template.vue）第一张幻灯片被删除但并非完全第一张幻灯片的dropzone图像没有被破坏并且保留在 DOM 中，而不是slide2从 DOM 中删除 ,（下一张幻灯片）的图像（请在代码和框演示中尝试一次以真正了解我的意思）。当我删除时不会发生这种情况，slide2或者slide3仅在slide1.

CodeSandBox 演示

应用程序.vue

组件\slider.vue (父)

components/slide-template.vue (child, with vue2-dropzone)

slide-title.vue（没那么重要）

utils.js（实用程序）

从技术上讲，这就是应用程序的工作方式，slider.vue 从数据库（firebase）加载和获取数据并存储在数据数组slideList中，循环slideList并将每个 slideData（prop slideItem）传递给 vue-dropzone 组件（在 slide-template.vue 中） ，当 dropzone 挂载时，它会触发manuallyAddFiles(slideItem.zones)自@vdropzone-mounted定义事件。

异步manuallyAddFiles()从 API（托管在 heroku 上）获取图像，为图像创建 (generate_ObjURLfromImageStream(url)) 唯一的 blob URL (blob:/)，然后调用插件 APIdropZone.manuallyAddFile()将图像加载到相应的 dropzone 中。

要删除当前幻灯片，孩子deleteCurrSlide()调用父母的（slider.vue）removeSlideFn（作为道具传递）方法与idx当前幻灯片。removeSlideFn用于splice移除对应数组 idx 处的项目this.slideList.splice(idx, 1)。

问题是当我删除第一张幻灯片时，第一张幻灯片被删除但不是完全删除，第一张幻灯片的 dropzone 图像没有被破坏并且仍然保留在 DOM 中，而是slide2从 DOM 中删除（下一张幻灯片）的图像.

CodeSandBox 演示

我不确定是什么导致了这个问题，可能是由于 vue 的反应系统或Vue 的 Array 反应性警告导致了这个问题。

任何人都可以帮助我理解和解决这个问题，如果可能的话，指出问题根源的原因。

非常感谢您的帮助。

谢谢，

我在 vue 多选中遇到了 v-model 的问题。Multiselect 要求将一个对象传递给 v-model 以具有初始选定值，以便它可以将该对象与选项 Object 匹配。这是我的代码示例：

Vue 不接受以这种方式将对象传递给 v-model，我想不出另一种方法来做到这一点。

这是收入对象：

选项：

首先是一些上下文：

我正在构建一个基于 VueJS 的扫雷应用程序。我的网格是一个对象树：每个 Box 对象都有一个“邻居”属性，其中包含 Box 对象，这些对象是下一个框。

结构是圆形的，但很好。

现在的问题：

首先，我尝试在一个小网格（5x5）上运行良好，但是在尝试生成更大的网格（50x50）时，Vue 在设置观察者时产生了“超出最大调用堆栈大小”错误，这是日志

这棵树似乎太大了，vue 无法处理反应性。

冻结我的对象时已确认它工作得很好（没有调用堆栈错误）：

但是由于冻结，反应性（显然）下降了。尽管如此，我需要反应来显示点击框。

现在这是我发现的问题/线索：

• 您是否曾经遇到过 Vue 的调用堆栈问题，或者我错过了什么？

• 有没有办法在具有这种对象结构的 VueJS 上进行反应性工作？（VueX 是解决方案的一部分吗？我真的不知道）

• 还是我应该考虑使用 VueJS 以外的东西？（用香草做吗？？）

提前谢谢，如果我的帖子很乱，对不起，这是我 5 年来的第一篇文章，我很紧张哈哈

编辑：这是一个游戏对象的样子：

此外，在点击一个盒子时，我需要： - 如果 Box.hasBomb 为真，则结束游戏 - 显示内容（如果里面没有炸弹） - 如果 Box.nearBombs 等于 0，则传播reveal()调用

我的 Box.reveal() 方法是递归的：

这就是为什么我认为我需要反应性来更新每个 Box.reveal 调用的视图

same as title says. A computed property from a object it´s not reactive until the input box lost the focus.

But if the object is in data, the value changes as soon as changed in the input.

I created a codepen with the example: https://codepen.io/Albvadi/pen/QWwMOQV

If you change the first input, the data value is changed inmediate. If you change the second input, the computed value if changed only when input lost focus.

How can I solve this?

== EDIT ==

Thanks for your answers! I know that putting awayteam in the data section solves the problem, it was just an example to simplify my problem.

My problem was that along with the two results, I wanted to have a computed property to be able to issue to another component. I edited the codepen with the final result: https://codepen.io/Albvadi/pen/jOELYwN and it´s working correctly.

But @Sami Kuhmonen comments that computed properties are only read properties but in my checkFinalResult I´m setting the computedMatch.. It´s the right approach??

我的数据中声明了两个数组

一旦页面被挂载，下面的方法就开始了

此方法调用我的 api，然后将响应分配给 infeed_data 和 infeed_model。然后我执行一个 for 循环并在 infeed_model 上创建新的键/值，但是新的键/值显示在 infeed_data 中。

我的 Vue html

渲染 html 以显示 _data 如何镜像 _model

这听起来可能微不足道，但事实并非如此。所以总结一下：

1. 我们有一个存储在数据中的对象数组（最初是空的）。
2. 创建组件时，我们通过自定义结构方法将一些对象添加到数组中。
3. Fabric 方法接受基础对象并使用一些额外的道具对其进行扩展。
4. Fabric 方法添加的道具之一是对数据的引用（this.foo）。

问题：生成的对象不是反应性的，也不会对this.foo变化做出反应。

演示：https ://codesandbox.io/s/vigilant-framework-47me6?fontsize=14&hidenavigation=1&theme=dark

到目前为止我已经尝试过：

1. 使用 hack 返回 newVue(...)以使对象具有反应性（https://github.com/vuejs/vue/issues/2660）。
2. 用于在 fabric方法$set中设置附加属性。

所以问题是：我们如何让对象反应？

PS我知道使用观察者/计算是选项，但在这种情况下不是。我希望对象具有反应性，而不是手动更新整个对象数组。