问题标签 [vue-reactivity]

我正在使用 vuex 商店状态v-dialog在我的 NuxtJS 应用程序中显示/隐藏 Vuetify。以下是代码摘录：

Vuex商店：

对话框组件：

这一切都很好，但是当我从一个页面重定向到另一个页面时，它会停止工作。

我点击浏览器刷新，它又开始工作了。使用 Chrome Vue 开发工具，我可以看到状态在 store 以及 v-dialog value 属性中设置正确，如下所示

在 Vuex 商店中

在v-dialog组件属性中

然而对话框是不可见的。任何线索发生了什么？

我正在使用NuxtJS 2.10.2和@nuxtJS/Vuetify plugin 1.9.0

我有一个带有输入和添加按钮的简单页面。在此之下，我列出了所有项目。

如何刷新另一个客户端上所有项目的列表？例如，如果我在两台不同的 PC 上打开相同的页面，并且添加一个新项目（房间）。在第二台电脑上，这个房间列表在我刷新页面之前不会改变。

我有一个User-Select包装v-select的组件。该组件的工作是获取用户列表作为用户类型，并允许用户选择一个或多个用户。这是该组件的代码。

如您所见，我有一个链接到计算属性的 v-model ，它发出输入事件。我的财产名称也是value. 因此，我希望使用此 UserEvent 组件的父组件能够进行 v-model。

在父组件中，我有一个计算属性，我已经对所选值进行了 v 建模。这是代码。

现在我可以在 vue 开发工具中看到这个NewMessage组件中的计算值发生了变化。然而，这个组件不会重新渲染，并且选定的值不会传递给UserSelect组件，直到我切换，安排以后的复选框，这会导致组件数据发生变化，这会触发 Vue 组件突然开始显示选定的值。

这里发生了什么。关于 Vue 的反应性，我在这里无法理解。

感谢期待。你可以在这里试试，或者点击上方的编辑沙箱按钮查看和编辑代码。

要尝试它，请单击 Vue 消息链接，然后单击回复，然后键入“测试”，然后从下拉列表中选择“测试用户”。在您单击复选框 - 稍后安排之前，所选用户不会显示。

PS：在组件中，UserSelect，在计算属性 selectedVal 的设置器中，如果我手动设置属性值的值（通过简单地取消注释第 39 行 - 现在已注释），一切正常。但是，我收到一个警告，即不应直接设置属性。由于我正在发出输入事件，父组件应该更改其 v-model 并重新渲染，从而导致子组件重新渲染。请纠正我，如果我的理解是错误的。问题再次是父组件的 v-model 更改，但它不会重新渲染。

我有一个看起来像这样的数组：

我呈现一个类似这样的列表：

现在我有一个函数可以在人们输入新邮政编码时获取城市，它会获取一个城市并将其设置为：

问题是，我可以确认文本实际上在正确的对象中发生了更改，但它不会触发重新渲染。在这种情况下，我是否以错误的方式使用了 $set 函数？

这是我的父组件abc.vue

现在这是我的子组件DetailsTable.vue

现在在开始时 newRowData 包含调用 updateclient 方法之前的 rowData 的值。一旦从 ag 网格表中更新了值，就会调用更新客户端函数，然后更改名称。现在，子组件中的 newRowData 显示了更新后的名称，即 cat，但这在表中没有更新。该表仍显示“abc”。在我下次单击 ag 网格单元格后，它会显示更新的值。有没有办法在不再次单击单元格的情况下显示更新的值我应该如何实现上述反应。

我有这个组件：

我正在尝试editor.view.toolbarManager.buttons在v-for循环内使用。Vue devtools 向我展示了（以下所有 3 种情况）它editor.view.toolbarManager.buttons是一个对象并包含 4 个包含另一个对象的属性。

editor.view.toolbarManager.buttonsEditor()正在使用动态导入的脚本填充类的子类，如下所示：

我这样填写editor.view.toolbarManager.buttons：

接下来是问题：当我尝试{{editor.view.toolbarManager.buttons}}在模板中渲染时，我看到案例 2 和 3 的空对象如下：

{}

这意味着 vue 反应性被破坏了。Editor()是外部类，我不想将它绑定到 Vue。由于使用拼接/推送方法，Vue 反应性适用于数组的外部类。是否存在具有保留 Vue 反应性的对象属性的类似方法？

所以我在渲染内容可编辑单元格时遇到了这个问题，这让我发疯了。我有这样的 b 表

我正在设置：像这样的字段

我正在设置：项目，像这样

这种方法可以正常工作，直到我遇到极端情况。当单元格最初为空时，然后我将数据输入到表格单元格中，当焦点离开时，输入将被渲染两次。例如点击空单元格，输入“ 1 ”然后将焦点移出浏览器将实际呈现“ 11 ”；或者点击空单元格，输入“ ab ”然后聚焦浏览器将实际呈现“ abab ”

请帮忙！

我正在建立一个用户可以上传帖子的网站。每个用户都有一个个人资料页面，他们可以在其中查看他们喜欢的帖子以及他们创建的帖子。在创建的帖子上方有一个删除按钮。当我删除帖子时，它会被删除，但只能从后端删除。在主页和个人资料页面上（如果我再次进入个人资料页面），帖子仍然存在。如果我刷新页面一切正常，但必须有一种方法可以在不刷新的情况下实现这一点，对吧？

我无法重新渲染组件。如您所见，我对编程很陌生。使用这种删除方法，我需要更新 3 个组件（Home.vue、Posts.vue 和 Profile.vue）。

我的个人资料组件/页面的删除按钮 html：

下面的生命周期挂钩。它在“方法”下：

vuex store 组件的删除功能。它在“行动”下：

来自“商店”的突变

},

Possibly this question has already been asked and answered a thousand times but I couldn't find it. Sorry :(

For the concept I have the following array in javascript (I am depicting the worst case szenario here):

Now I would like to replace the element that has currently the id: 79 with Object {randomProperty1: "lulu"}. I don't want to replace the array afterwards as I use it as a reactive property in a reactive system like vuejs, so it should stay stateful. So I can't do something like:

My naive approach so far is to do something like this:

But now as I understand I would have to go through my array twice. Considering I have a huge array doing this operation every time my mouse moves, and maybe also having to recompute my new Object I felt better if I went only one time through my array. In every other case this would clearly be and maybe still is premature optimization but I'm interested in this.

My dream approach would be something like this (in pseudocode):

But this obviously doesn't work as it is now call-by-value and not call-by-reference anymore.

The last (a bit ugly) approach I came up with is to change my array entirely like so:

So in short: Is there a better way to do it?

PS: I don't know it the tag 'vue-reactivity fit's here' - I don't know if this is a thing in angular or react as I don't know anything about those. My question just arose from vue-reactivity but I thought it could be generalized.

我有一个用作编辑部分的子组件。它复制一个道具created()作为 v-model 进行编辑，因为在用户单击保存按钮之前，我不希望任何编辑反映在父级上。当用户点击保存时，我$emit将编辑后的模型返回给父级进行更新。理论上。

实际上，无论何时我编辑子组件，父模型似乎都是被动的，尽管子组件<input>应该作用于传递的道具的副本。为什么会这样，我该如何预防？

编辑位置.vue：