问题标签 [vue-reactivity]

我使用以下数据创建了一个 vue 组件：

以及切换这些值的方法：

在我的 html 中

我知道正在调用 fliphw 函数（因为 console.log），但是当值为hwshow[0]true 时 foo bar 仍然没有出现。当我切换到使用布尔值而不是布尔值数组时，它可以工作。为什么？如果我无法访问布尔数组，可能还有什么其他解决方案？

所以我昨天一整天都在为这个问题苦苦挣扎。基本上，我有一个带有数据属性dbEnabled的根组件，它应该决定是否显示另一个名为Database的子组件。

这应该通过按下另一个名为Navigation的子组件上的按钮来实现。我设法将此属性从根发送到组件，方法是将其定义为接收组件上的道具并传递给v-show或v-if的Database。不幸的是，它只在创建实例时做出反应（不对变化做出反应）。

到目前为止，我已经设法通过使用document.getElementByID(#db)并添加一个设置display: none !important;的类来实现这一点。对于这个元素，但它可以用 Vue 原生完成吗？

这是 main.js 文件：

这是包含切换按钮的导航组件：

这是数据库组件：

目前正在为 json 数组生成的表单构建组件集，其对象类似于下面。我需要观察父值对象以填充其他字段并将其连接到彼此。

组件有一个层次结构，让父（或祖父）知道字段值作为表单模型。

由 FieldSlug 检查填充来自选定模型属性的数据的属性，在本例中为它的“标题”字段。

对于编辑和创建表单，我使用相同的视图（组件）。从 Vuex 获取并由 getter 过滤的数据。当其创建模式时，getter 无法从状态中找到任何对象并返回空对象。

如果其为空对象，则 $parent.value 不能被观看。（没有触发）如果它从状态返回对象，它工作得很好。

afaik, $set 使对象自动反应；这就是我在“FormView”中用来设置数据的东西。数据成功设置，但 $watch 没有触发任何内容。

我错过了什么？

我的小 Vue 应用程序的基本设置遵循基本的 Vue Cli 3 设置：

• -main.js（=根）
• -- 应用程序.vue
• --- Navigation.vue（这个调用$root）

在 main.js 的 created() 中有这个函数来加载导航菜单的 json：

效果很好。现在我想使用“this.$root”从 Navigation.vue 组件调用该数据：

虽然静态元素加载得很好，但异步加载的 navItems 不会更新。

我很清楚其他方法，如“事件总线”、“道具”或“VueX”，但我不想将对话框与 $root 组件一起使用并学习如何对异步做出反应——如果有的话在这种情况下可能。

当我尝试使用@click指令更改道具的值时，我收到此警告：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "name"

我的代码如下：

这个警告的原因是什么？

我一直想问以下关于 Vue Reactivity System 的问题。

我在 Vue 文档中读到，建议将组件的数据保留为普通的 JS 对象，而不是类对象。组件数据的各个属性也是如此。

为什么是这个建议？将数据作为类对象的实例有什么问题？在组件数据中使用 getter/setter 和方法会导致哪些边缘情况？（这是我的主要问题）

我还有另一个关于 Vue Reactivity System 的问题。

我可以在运行时直接更改组件计算的 getter/setter 和方法，而不会遇到 Vue Reactivity System 的问题吗？更改的计算 getter/setter 是否仍被缓存和优化？是否可以从组件模板访问更改的方法？我可以在运行时添加新的计算 getter/setter 和方法吗？如何？

非常感谢！

我正在尝试将对象添加到我在 Vue 实例数据对象中声明的数组中。我可以在状态的购买对象中设置值，但是当我将数据推送到订单队列数组时，不会填充空数组。函数被触发，但数组没有更新。

这是我的表格：

这是我的javascript：

有人可以解释一下它发生的原因和原因吗？

我刚刚在试验 vuejs，试图让它在我的一个 laravel 项目上工作。

问题是，如果我的元素在布局刀片模板中，但不在该部分中，则反应性工作正常。我试图从控制台修改属性以查看它们在 DOM 中的变化。

我有一个名为 blog.blade.php 的视图，它扩展了布局 app.blade.php

app.blade.php 中的代码

这是我 blog.blade.php 视图中的代码

在元素根中，会显示 tester 属性的值，但无法修改，但这在 app.blade.php 布局文件末尾的 test 元素中有效。

我真的迷路了，不知道这里发生了什么。如果有人能对此有所了解，那就太好了。

https://pastebin.com/GkNqFUzy

我有一系列文本字段，每个字段旁边都有一个按钮。当用户点击其中一个字段旁边的按钮时，我想将特定样式应用于该按钮（以更改其颜色） - 本质上允许用户“勾选”他们已检查该字段（类似于清单）。

页面上有九个文本字段/按钮，我将所有按钮的状态存储在一个名为的数组中，该数组items_checked初始化data()如下：

每个按钮都有以下代码：

其中数字表示按钮的索引（即 0 是第一个按钮，1 是第二个按钮等）对应于 中的等效布尔值items_checked。

该v-on:click事件只是在items_checked点击按钮中切换检查状态：

这在console.log显示布尔值切换时起作用。

但是，由于该类未应用于按钮，因此v-bind不起作用。itemChecked绑定到数组中的布尔值似乎是一个问题，因为当我只绑定到其中声明的标准布尔值时，data()它可以正常工作。

我最终确实需要将所有已检查的状态存储在一个数组中，以便在允许用户提交页面之前评估所有已检查的状态。

任何帮助，将不胜感激。

Vue 通过其响应机制触发组件重新渲染，因此开发人员可以直接改变状态。Vue 会检测状态变化并触发组件重新渲染。

React 通过手动触发组件重新渲染setState，React 将区分 VDOM 以检查它是否应该重新渲染。建议开发人员不要直接改变状态，而是创建一个新的状态来替换原始状态，这样原始状态和新状态就可以shallowEqual有效地进行。（不可变方法）。

例如，有如下状态：

似乎反应机制更直观，可以编写更少的代码。我想知道这两种方法之间的优缺点是什么？我应该选择哪种方案而不是另一种方案？