问题标签 [vue-reactivity]

我编写了一个支持子行的网格组件 ，即一个可切换的行，其单元格跨越表格的整个宽度，在每个正常行下。为了跟踪子行状态，我使用了一个名为的数据属性openChildRows，默认为一个空数组。当用户单击每行第一列上的切换图标时，该行的子行将打开。再次单击将其关闭。该openChildRows数组包含打开行的 ID。

我遇到的问题是，当我为子行使用组件时，将重新安装切换后的所有打开的行。这显然是低效的，尤其是当子行组件在挂载时发送 ajax 请求时。理想情况下，我想要的是只安装新的子行。

我已经使用 JSX 为模板编写了网格。下面是相关代码：

行模板：

切换方法代码：

_getChildRowTemplate方法：

在尝试 Vue 和 Vuex 时，我偶然发现了以下错误消息：

我没能理解和解决这个问题，主要是因为msg定义在data. 它可能与 Vuex 没有直接关系，但我只有在开始使用 Vuex 时才遇到它。

这是我的代码：

主.js：

应用程序.vue：

商店.js：

谢谢。

我有一个下拉元素的以下代码。下拉元素的选项是从数据库中加载的，并且可以正常工作。

每个元素都可以很好地触发监视处理程序，但值为零的元素除外。我看到该元素本身具有VUE GET/设置反应性属性，但是在选择具有零值的下拉选项时，我的手表处理程序拒绝触发。我需要将它保持为零值，除非它绝对不能完成，因为零表示我们数据库系统中为此应用程序制作的所有数据的聚合。必须从零更改它也会导致其他系统的更改。关于为什么零值没有触发手表处理程序的任何见解？

.select-site p Active Site: select(v-model='selectedSite') option(v-for='option in options', v-bind:value='option.value') | {{ option.text }}

我需要显示item.title外部<v-carousel>但我收到此错误消息：

[Vue 警告]：属性或方法“item”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：https ://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties 。

我检查了 Stackoverflow 搜索的结果，但我真的很难理解它。如果有人能通过这个例子向我解释，我将不胜感激。这是我的代码：

这是我需要存档的：

一旦图像更改为下一个图像 -之外的文本范围也应该改变。我试图检查范围外的项目数组的值，但它不起作用： <h1 v-if="(item,i) === 1">Lion</h1> <h1 v-if="(item,i) === 2">Ape</h1> 如何访问范围外当前轮播项目的值？

我正在使用实例属性构建一个 VueJS 插件，我需要将一些反应值带回 VueJS。

我的搜索：

我不明白背后的东西Object.defineProperty()，我搜索了vuex getters 初始化，因为我的逻辑相似，但我不明白如何正确操作。

简单的例子：

在附加到他的原型的 VueJS 片段下面，main.js：

现在，从组件访问它component.vue：

示例结果：

在setTimeout我们拥有之前false false（这是预期的输出），但在setTimeout我们拥有之后false true（getter 没有收到修改，但直接访问器有值）。

将一些反应性的东西带入我的任何想法$ajax.isLoading()？

我使用 axios 获取我的数据并将我的对象设置为新数据。我还首先用空值声明了该对象。

数据在我的 Vue 开发工具中正确显示，如果我在控制台中记录它，但只要我在我的 HTML 中显示它

它显示旧的初始空数据

我的代码：

A： 根据我的请求显示实际正确的数据

B： 根据我的请求显示实际正确的数据

我尝试过的事情： 我阅读了这个文档https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

我看到他们说根对象不能是反应性的，所以我将“myObj”包装在一个容器对象中。

我已经更换了

和

和

没有任何作用！

我的主要问题是它在本地主机上运行良好！我猜这与托管服务器上的小延迟有关，而不是本地？

更新

这是带有真实数据的图像

Vue 组件数据（来自 Vue 开发工具）

Console.log 数据

HTML 显示数据

更新 2

根据要求，MCVE

我想要的结果（这是来自我的本地主机的屏幕截图，在 MCVE 中我删除了很多内容，只包含了最低限度的内容。不要判断对象，我没有创建数据库，但我以该格式获取数据。

我发现了一个奇怪的问题：一个 vuex 组件中的操作使用了其他 vuex 组件的 getter，但是这个操作在任何地方都没有使用，它刷新了它的 vuex 组件的状态

但是当它的依赖项被刷新时，它本身会自动刷新（=被执行）

所以我想知道。我可以依赖这种行为吗？你能解释一下它是如何工作的吗？

我广泛使用简单的 Vue 计算和方法，并且知道它们的反应性。但是 Vuex 操作中的这种行为对我来说似乎很奇怪

我在 vuex 中有一个任务列表。我在一个组件中有一个按钮，它将添加一个任务。我还有一个后端服务器，它将任务存储在数据库中。

现在，我的设置是这样的：

我想要的是：

我遇到的问题是，在数据库创建它之前，我没有该项目的 ID。我可以在本地创建一个临时 id 并将其作为临时 id 发送到服务器，但这似乎很乱。我不会存储它，我只会在 vuex 中使用它来更新从服务器返回的对象。

例如，假设数据库表任务如下所示：

我怎么知道来自服务器的响应对应于我刚刚推入 Vuex 的对象？我无法按标题查找，因为它不是唯一的。我无法通过 id == null 进行查找，因为在收到服务器响应之前，我可能会创建多个任务。

我可以在 Vuex 中做到这一点：

我可以使用来自服务器的响应来查找我设置的具有 vuex_id 的任务，并使用数据库中的 id 对其进行更新。

感觉应该有一种更简洁的方法来让前端立即做出反应。

我的主应用程序中有一个Modal组件，每当必须显示模式时，它都会通过事件获取传递的内容。模态内容始终是一个列表，其中包含与每个项目关联的操作，例如“选择”或“删除”：

可悲的是，当像下面的组件一样将计算属性传递给该模式时，反应链接会被破坏 -> 如果操作是“删除”，则列表不会更新。

请参阅此小提琴中的最小用例：https ://jsfiddle.net/christophfriedrich/cm778wgj/14/

我认为这是一个错误 - Vue 不应该记住objKeys用于渲染Modal和更新它吗？（转发obj到objKeys工作的更改。）如果没有，我做错了什么，我怎么能达到我想要的结果？

我观察到，当一个来自的普通属性data()和一个派生自它的计算属性通过事件传递时，前者保持其反应性，而后者失去它。

我为它设置了以下测试用例（如果您愿意，也可以作为 JSFiddle）：

计算结果与正常属性有何不同，从而导致这种行为差异发生？

我从之前的问题中了解到，像这样传递反应对象是不好的做法，我应该使用 getter 函数，但是我仍然想知道为什么会出现这种差异。