问题标签 [vue-reactivity]

我想为 vuex 状态创建一个突变，但使其动态更新状态 - 让有效负载包含我要从中删除元素和键的对象的路径。

1. 调度动作

2. 提交突变

3. 突变接收带有 path = 'state.xmlValues.Offers[0].data.Pars' 和 key = 0 的有效负载

我曾尝试使用 state[payload.path] 语法——但这不起作用。该路径包含字符串“state.xmlValues.Offers[0].data.Pars”，因此为了使其正常工作，我使用了 let stt = eval('state.' + payload.path)。但是，从状态中删除元素变得很棘手：当使用 Vue.delete(stt, payload.key) - 它只会删除本地存储在 stt 变量中的元素键，而不是状态中的键。

然后我用 stt 重新分配了状态对象（已经从中删除了所需的元素），对路径进行了硬编码——这就是我试图避免的：

如何将路径传递到商店，然后使用它来删除状态中的对象而不显式硬编码路径？

至于我的其他突变 addOption，我还使用了状态对象的动态路径 - 并且在使用 stt 中评估的动态路径时效果很好

我有一个从 APIresolveMovieSessions接收movieSessions并根据 API 结果创建新数据集合的方法。

我想要实现的是从这里转换 API 数据：

对此：

为此，我编写了以下代码：

但是当this.resolveMovieSessions(movieSessions)被调用时，结果是dataconst的初始值const data = []。

但是在方法内部，如果我放了一个，console.log(data)那么我会得到一个新的集合，但是一个非反应性的集合。

怎么了？

我已经为这个问题苦苦挣扎了好几天了。我希望有人可以帮助我。

我有一张结帐卡，我正在尝试更新数量和总价。：

父组件：

子组件：

问题是我已经从服务器获取的卡片项目在 localCard 中是反应性的，但是尚未从服务器获取但在整个结帐过程中添加的项目不是......

我已经尝试制作一个 JsFiddle，但我无法重现该问题。显然这是一个反应性问题，但我不知道我应该如何解决这个问题。

我在这里需要一些帮助，谢谢！

我正在尝试构建一个 Vue 组件，该组件显示 a 的小时和分钟，Date并在按下 + 或 - 按钮时发出更改的版本。

截图：https ://i.imgur.com/hPUdrca.png （没有足够的声誉来发布图片）

使用 Vue.js Devtools（在 Google Chrome 中）我观察到：

• 更改事件触发并包含正确的日期
• date道具已正确更新

它只是不重新呈现日期。

https://jsfiddle.net/JoshuaKo/6c73b2gt/2

在 Vue.js 中，我有一个带有动态添加/编辑属性的数据对象，这些属性本身就是数组。例如，属性开始如下：

随着时间的推移，通过各种按钮点击等，vals可能会如下所示（实际属性名称和值是 100% 动态的，基于多种因素）：

随着数组属性（即set1和set2）的更改，我希望能够对这些更改做出反应。

例如，我可能会在我的代码中执行以下操作：

但是，当我这样做时，组件并没有更新（我推测是因为我将一个对象推到对象的子数组的末尾；而 Vue.js 似乎没有跟踪这些更改）。

我已经能够通过执行this.$forceUpdate();上述操作来强制组件具有反应性push，但我想当对象被推到对象子数组的末尾时，必须有一种更雄辩的方式让 Vue.js 具有反应性。

有谁知道更好的方法来尝试做我想要实现的目标？谢谢你。

我有一个包装器组件，它为子组件提供 API 调用并存储结果，还有一个列表组件，它显示通过 prop 传递的请求项目。问题是它在开发模式下显示它们，但在生产中没有显示，尽管 API 调用在两种情况下都可以并且响应是正确的。

这两种模式我都在同一个环境中运行。看起来像一个反应性问题。

这是一个模板代码：

VueAPI 组件：

我希望result.data在 VueAPI 组件中将显示为开发模式和生产模式中的列表项，但它仅在开发模式下如此。

如您所知，对于每个数据属性，都会new Dep创建一个类。Each Dep类有订阅者watchers。

我查看了 vue.js 源代码，对于每个组件，只watcher创建了一个类，它还包含render函数（组件的模板）。

1）您能否描述一下何时以及为什么data其中一个组件的属性可能具有Dep具有多个类的watcher类？

2）所以我可以总结一下：如果我们有一个具有 5 个data属性的组件。这 5 个数据属性中的每一个都有不同的Dep类实例。并且这些Dep类中的每一个都具有相同的Watcher并且watcher包含组件的render功能。如果状态发生变化，这 5 个Dep类的通知之一将运行并且该通知运行其watcher's render功能？

我正在 TypeScript 中创建一个类来处理我的表单提交和服务器错误：

这将在我的 Vue 组件中使用，如下所示：

这在功能上有效，我可以填写表格并将数据提交到服务器。我遇到的问题是 Vue.js 的反应性。因为类上不存在属性Form，所以数据不会传递给v-model，它只会在表单更改后在表单内更新。

除非我从表单在屏幕上显示数据，否则这不是问题。我现在可以忍受它，但我想知道是否有办法让 Vue 识别我的Form类上的反应属性，或者是否有更好的方法来实现这个功能而不影响类型系统。

我正在使用mapGettersVueX 的帮助程序，但我仅在页面的第一次加载时遇到了一些问题，它不是反应式的......让我告诉你：

我的 html 模板触发了更改：

我的商店收到价值

然后我的组件监听商店：

所以现在，当我第一次加载页面时，我得到了这个 console.log "inputValue" null undefined，这是完全正常的，因为我的商店里什么都没有，它给了我默认值null。

但现在是奇怪的部分。我开始更改输入值，但我的控制台中没有任何内容。什么都没有动...

然后我重新加载页面并在加载时得到这个console.log "inputValue" 5 undefined（5是我之前输入的值）所以你可以看到，当我之前更改输入时，它很好地保留了存储中的值但是计算价值没有自我更新......

Ans 现在，当我更改输入的值时，我的控制台日志是这样"inputValue" 7 5的，所以它可以正常工作，因为我希望它从一开始就可以工作......

我做错了什么？为什么在第一次加载时计算值没有反应？

谢谢你的回答...

访问 /parent 页面并渲染父组件，

访问 /parent/modal 并渲染 Child 组件（打开一个 modal 组件），

导航回 /parent （尝试在父组件中呈现更新的数据）这就是我卡住的地方！

保存数据后，我正在跟踪路由参数，并使用函数获取数据。但是，父级没有反应。

我必须手动刷新或在函数中添加 location.reload() 以查看数据更改。

为什么父级对路由器更改没有反应？

我已经设置了路线手表：

• 不工作

但是，在 vue.js 文档中， beforeRouteEnter 和 beforeRouteUpdate (to, from, next) 显然是首选方法，并且数据仍然像手表一样被获取，但父级没有反应。

当我没有将路由设置为嵌套（/父/子）时，它可以工作，但是“灯箱”效果将不存在，它看起来像一个全尺寸的页面加载。

我们只是试图让编辑帖子的模态版本工作，因为它更加用户友好，我们只是完全卡住了

如果您需要更多代码结构，请告诉我