问题标签 [vue-reactivity]

我正在使用 VueJS 构建一个树视图，我想将最后一次单击的项目保存在商店中，然后使用该商店显示组件中最后一次点击的项目。

我在要显示项目的组件中使用计算属性。问题是当存储发生变化时，它不会影响组件中的计算属性。

相关代码见此链接： https ://jsfiddle.net/eywraw8t/527884/

当传递的道具对象中的嵌套属性发生更改时，我无法更新计算属性。

this.favourite是通过 props 传递的，但是当this.favourite.selectedChoices.second.id和this.favourite.selectedChoices.first.id更改时，计算的属性不会更新。

关于如何使这种反应的任何想法？

这是计算的属性：

我有这么简单的组件。它在第一次渲染时很好，但是当result道具发生变化时，它什么也没发生，所有的类仍然是一样的。

尝试构建我自己的表单验证插件（它是出于学习目的 - 所以我不使用现有的库）。

所以我创建了以下mixin：

并从组件加载 mixin（因为我不想在任何地方看到这个）：

无论如何，任何时候输入发生变化 - 有一个事件可以测试值并控制我的错误包：

我已经绑定:invalid="errors.has('email')"了HTML 元素（false无论我在做什么，无效的属性仍然存在。

我确实明白，为了创建反应性属性，我必须使用 getter/setter 来处理这个问题，但我有点坚持。

我有一个监听器来检查最后选择了什么输入，以便稍后添加某种字符串/变量。

这似乎工作正常，当我单击输入字段this.lastElement时，会使用焦点元素进行更新。所有这些输入都有一个v-model，它可以是对象中的字符串，也可以是纯字符串。

现在问题是当我尝试通过以下方式更新值时：

Vue 不会检测到它的变化，同样在 Vue 开发者工具中，字符串也不会被更新。但是在输入字段中它确实得到了更新。所以这应该是一个反应性的事情。

当我在输入字段（v-model）中添加一个新字符时，它会再次更新。所以只是当我更新字符串时this.lastElement它不会注册它的更改。

问题是输入字段是动态的，所以我不知道这里有多少输入字段以及有多少列表等。所以我需要Vue在lastElement更新值后重新渲染变量。

编辑

我只是用@focus在这里尝试了一个例子

如果我lastElement稍后更新，它不会更新它，testVar而只是lastElement.

我已经删除了我的代码中大部分无用的部分，所以如果这段代码没有真正的意义，请不要担心，它只是向你展示什么不起作用。

首先，我从一个名为的基本数组创建一个数组objects：

和创建功能

我将一个属性初始化activated为false. 在我的真实代码中，我没有使用 a forEach，而是 afind但结果是相同的。

然后，我显示几个按钮来触发“激活”

被触发的功能是这个：

我的目标只是更新activated属性。

为了检查反应性是否有效，我有一个观察者：

我有两个问题：

1/由于所有对象的所有activated属性都设置false为，为什么只有一个工作，属性最初设置为的那个undefined？

2/ 如果我将激活函数更新为：

它运作良好。有人可以解释一下为什么，有什么区别？

在这两种情况下，VueJS Devtools 在单击刷新时都会显示更新的值。这是一个反应性问题。

你可以在这里找到一个小提琴：

https://jsfiddle.net/dv1jgneb/

我在 Vue.js 中有一个简单的文本字段：

是否可以将数据模型中的值从“onChange”更新为“onBlur”的频率降低？

我有一个v-for包含一个组件的列表。在组件内部，我根据属性的值显示 a<div>或 a 。<input>问题是当我更改属性值时，v-for 中的所有项目都会更新，而不仅仅是更改的组件。这不是小型应用程序的问题，但我注意到在处理较大的数据集时性能显着下降。

所以基本问题是：

当仅更新一个组件时，如何避免渲染所有组件？

我把它全部放在一个JSFiddle here中。请注意，当您单击按钮以显示 C 组件输入时，所有组件都会重新呈现（显示在控制台中），而不仅仅是 C 组件。

HTML

JS

我有一个带有 3 个按钮的小 vue 应用程序

将数字添加到数组中

所以通常你可以得到

我将这些输出为列表

但是我的删除号码方法可以做到这一点

数据（数字）显示了正确的结果，但是 UI 总是删除最后一项而不是我想要的。

所以如果我有

我试图删除数字 2。数据是正确的，但 UI 总是只删除数字 3。

我怀疑这是一个反应性问题，但无法解决。我还尝试将 Vue.delete 包装在 nextTick()

我正在使用 vueJS 创建一个简单的应用程序，但我在反应性方面遇到了一些问题。

当用户连接到他获得 JWT 的应用程序时，我将此 JWT 存储在我的本地存储中。为了验证用户是否已登录，我只需检查令牌是否存在。

首先，这是一个好方法吗？

现在我正在尝试更新导航栏，当用户未登录时，我有 2 个按钮“注册”“登录”，当他登录时，我想让我的“断开连接”按钮出现，另外两个按钮消失。

我的导航栏组件内部带有“v-if”，用于显示或不显示按钮。

目前我在我的 data() 中设置了一个布尔值“isLogged”，如何让 vueJS 监视这些数据并在这些数据更新时更新我的​​组件？

我想让我的导航栏更新而不必刷新组件。