问题标签 [vue-reactivity]

我有 2 个数据属性对象，当我单击按钮“ Envoyer ”时，我推送到第二个属性，我不希望第二个属性数据自动更改。

前任 ：

我知道我必须使用 Vue.set(object,property,value) 来确保 Vue 中的反应性，但以下代码不起作用。

零件：

组件方法“setLetter”：

组件方法“letterClass”：

问题：当字母属性“正确”设置为“真”时，类“正确”未应用于 div 部分解决方案：使用“this.$forceUpdate();”时查看更新 但不是不调用这个函数

在上述情况下，如何在不调用 forceUpdate 的情况下获得视图以响应式更新？

非常感谢。

我有一个这样的对象：

当用户编辑某些东西时，我想检测对象键中所做的更改并将该键users保存在另一个对象中（比如editedFields）！我怎样才能做到这一点？

我尝试使用这样的深度观察者：

但我不确定如何获得该编辑过的密钥！请帮忙

我正在使用Vue.js 2.5.17我有两个组件，App（父）和 TreeNode（子），它们显示来自深度嵌套对象的项目的树结构。树中的每个节点都显示有 TreeNode 组件，它是一个递归组件。

树节点组件

树节点模板

应用组件模板

应用组件

上面发布的对象只是一个例子，我的实际对象有更多的嵌套级别和每个级别的项目。

我面临的问题是，每当我的 items 对象深处的属性发生更改（更具体地说，节点内数据对象的示例属性）时，DOM 都不会更新。我通读了反应性警告，发现默认情况下添加新属性不是反应性的，但我没有在这里添加新属性，只是更改现有属性。

当树节点中的数据更新时，我会遍历对象以找到正确的节点并更新其属性，如下所示：

有小费吗 ？谢谢！

编辑：数据始终仅在父（App）组件中更改。

我知道，为了使对象或数组在 Vue 中具有响应性，必须在根数据结构上定义其属性。

将对象数组添加到根数据结构上定义的预先存在的变量，并使该数组中每个元素的每个属性都具有响应性的最佳方法是什么？

我尝试遍历数组并将每个数组添加到根数据模型中，即：

但是，Vue 在以后更改时仍然不会响应“term.selected”属性。

有没有更好的方法来实现我的目标，还是我需要求助于 $forceUpdate？（手册说在 99% 的情况下使用 $forceUpdate，你做错了什么，因此这篇文章）

从文档（https://vuejs.org/v2/guide/reactivity.html）中，我的印象是对象的所有属性都需要在 Vue 数据对象中才能响应，除非它们被明确添加使用Vue.set(object, key, value), 或this.$set(object, key, value).

但是，我将 Rails 与 Vue 一起使用，并且我在表单中收集的任何数据属性，无论它最初是否在数据对象中，都会变成反应式的。我正在使用 Jbuiler 构建 JSON 对象，但我认为这不会影响反应性，因为如果我删除那里的属性，它们在表单中收集时仍然是反应性的。我已经尝试过 Rails 中对象上的属性和不在 Jbuilder 中的属性，无论是否通过控制台添加。都变得被动。这很好，但不是我期望的行为，所以我想了解它。

这是一个例子......

当我开始在该product.location字段中输入时，输出立即出现在屏幕上，因此它似乎是反应性的。检查控制台中的对象reactive getter会发现reactive setter. product.location该属性最初不在 Vue 控制台 devtool 中，但在我开始在该字段中输入时它就会出现。

那么，什么给了？

我创建了一个数组，其中包含描述按钮信息的对象。在我的模板中，我有一个active代表活动按钮的类。默认情况下，数组的第一个按钮是活动的。

模板 ：

脚本 ：

按钮数组在数据中初始化为一个空数组。当我的按钮数组更改时，视图会更新并显示正确数量的按钮，但active不会触发我的课程。

你有什么想法。

我知道有类似的问题，但我已经尝试了解决方案，但似乎没有任何效果

我的代码接受用户输入，根据该输入发出 axios get 请求，并旨在将数据分配给数组 staffs[]

与其他人所问的类似问题，axios 请求已成功发出，但不会将数据分配给数组

这是我尝试过的组合：

• https://codeshare.io/ammpP4 https://codeshare.io/G798xD https://codeshare.io/2Ewk1P https://codeshare.io/GqDPPk
• https://codeshare.io/GLbwwp

尝试将其更改为函数（响应）等并具有 var self=this，但似乎都不起作用

我什至设置了另一个查询 pokemon API 的测试页面，并且数据分配顺利进行，这让我很困惑为什么在这种情况下在这个特定页面上它不起作用

感谢任何解决此问题的想法

谢谢

我目前正在生成一个表格，其中列出了使用此代码生成的组件在所选测试期间遇到的问题：

每个问题对应一个项目，其相关信息包含在问题字典中并在表的前几列中引用。由于同一个项目可能有多个问题，同一个项目可以出现在表格的多行中。现在，每一行都有一些按钮，允许您修改底层项目以解决问题。

每当我修改其中一个基础项目时，我需要在所有行中修改它，我通过调用父组件中的函数来完成，但修改字典中的数据似乎不会触发我的任何手表或计算子组件，目前看起来像这样：

我试图包含一个不同的道具，我可以将它绑定到我的父组件列表中的一个条目，但是，除了非常笨重之外，它最终也没有工作，这让我觉得我可能有问题我的组件。

最终，我依赖于 v-for 以有序的方式遍历我的列表这一事实，再加上我在父组件中没有生成其他子组件的事实意味着子组件在我的组件的子组件中将具有相同的索引数组，就像我的问题数组一样。因此我可以使用这个：

哪种感觉像hack-ish和不可靠，但实际上有效，一次。是否没有其他更安全的方法可以根据对其道具所做的更改重新计算我的子组件？我真的觉得必须有。

我发现 vue.js 应用程序中的表单标签破坏了渲染。该应用程序是一个测验，它在设置表单时从本地 json 文档中提取问题，问题与 vuex 一起存储，并被带入具有计算属性的组件中。有趣的是，在因渲染错误而崩溃之前，测验将移至第二个测验。但是，当我删除表单标签时，测验继续完成。

显然不适合删除表单标签，因为它们对辅助技术很有用。那么表单标签或语义html标签通常与vue的recativity系统或渲染过程一起玩什么？我已经阅读了指南中的警告，似乎并没有解决这种情况。

下面是表单组件和vuex

表单组件

Vuex