问题标签 [vue-reactivity]

我有一个使用 Vuetify 的大型 Vue 应用程序，主要由表单组成，我需要添加检测何时对任何表单字段中的值进行更改的功能，以便当用户导航离开形式并且有未保存的更改，它们可以被警告。我可以处理值的设置以指示更改并发出警告，但我需要做的第一件事是能够检测各个字段中的更改。

基本结构是：

1）创建一个包含表单字段不同值的对象：

2）在组件中定义它data：

但也可以在代码中的其他地方更新，例如从后端检索记录时：

3）通过以下方式将对象成员绑定到各个字段v-model：

我最初的想法是对watch对象tenantModel进行捕获字段更改，但是触发监视的唯一时间是调用tenantModel行 like 时this.tenantModel = new Template({})；更改绑定字段之一中的值不会触发它。

我知道一种选择是为每个字段添加一个@input或@change处理程序（取决于字段类型），但这是一项繁重的工作，并且其他地方的一些字段（例如v-combobox字段）已经具有这些事件的侦听器。

有没有办法对绑定的数据对象进行某种监视？还是我必须在各个字段上添加侦听器？

对于一个刽子手游戏，我有一个Word.vue组件，我试图在其中初始化一个名为的数组，wordToGuessAsArray其中包含n 个空项（n = 要猜测的单词中的字母数）：

以下是我store与此问题相关的内容：

我的问题如下。在我的Keyboard.vue组件中，当用户选择一个确实属于要猜测的单词的字母时，我会更新我的状态：

我希望这个突变能在Word.vue这里更新我的组件中的单词：

然而事实并非如此。wordToGuessAsArray似乎没有反应，为什么？

我有一个Keyboard.vue包含许多Key.vue子组件实例的组件（每个键一个）。

在Key.vue中，键实际上是一个<button>可以被禁用的 html 元素。

通过单击我的应用程序中的某个按钮，我想重置键盘并再次启用所有键。我认为将 a 设置v-if为falsethentrue再次 ( <keyboard v-if="BooleanValue" />) 将重新渲染Keyboard.vue及其所有 Key.vue 子组件实例。

它没有。为什么不？

应用程序.vue

键盘.vue

键.vue

我的按钮重置键盘触发器：

我有一个基于 json 对象呈现的动态组件。

车辆类型是可以是汽车、摩托车或卡车的组件。本质上，这就是应该呈现的内容。

我遇到的问题是因为这些是动态组件，它们不使用 css 类或 vue 进行补间$refs。

我试过使用$nextick()and $forceUpdate(); 但补间不会触发。它看起来像是反应性警告之一。在旧的 jquery 时代，我认为 defer 会修复它。

有没有办法通过 ? 使动态组件可用$refs？

使用的补间引擎是gsap。

我的应用程序由一个具有组件的父应用程序组成。我的意图是隔离组件，以便父级（应用程序）和子级（组件）之间的唯一通信是通过

• 道具（父母→孩子）
• 并发出事件（子→父）。

但是，我遇到了意外反应的问题：当我更改子组件中的属性时，它们也会立即在父组件中更新。

我的总体问题是：props 是父数据的副本，还是指针？

具体来说，我将应用程序中定义的数据发送给我的子组件：

currentIncident在应用程序中定义data()：

从组件的角度来看，作为 a 接收的prop是一个 Object ( )，然后将其分配给在组件 ( )中props: ['currentIncident']定义的内部对象。data()mount()this.incident = this.currentIncident

this.incident然后在组件中进行修改，并最终用this.$emit().

currentIncident问题是当我在组件中修改时，父的内容会被即时修改incident。还没有发生$emit()。

这让我认为prop通过:currentIncident="currentIncident"双向绑定传递currentIncident，在我的理解中，这正是创建 props 和 emits 的原因（以打破这种双向绑定）

无论代码质量或未遵循的最佳实践如何，我都有以下疑问。

我有一个带有两个观察者的 Vue 组件。其中一个在组件的watch对象上声明（因此在其创建时实例化），另一个在 实例化，mounted()以避免在第一次突变时调用它。

这里的问题在最后：被观察的变量watchedAtInit正在从另一个观察者变异watchedAfterMountMethod，我知道这不是好的做法。

尽管如此，变异时还是会发生一些奇怪的事情watchedAfterMount：

• 我第一次突变watchedAfterMount时，watchedAtInit()观察者在 之前被调用watchedAfterMountMethod()，尽管突变watchedAtInit发生在watchedAfterMountMethod.

• 在进一步watchedAfterMount的突变中，顺序确实如预期：watchedAfterMountMethod被调用，它发生突变watchedAtInit，因此触发其观察者。

¿ 为什么watchedAfterMount观察者在第一次突变时会延迟？¿ 它是否与 Vue 的反应性系统有关，或者仅仅是由于不正确的观察者实现的结果？

¿ 我会遗漏其他东西吗？

提前致谢。

添加一个新行后，我尝试更新表。现在可以添加新行，但我必须刷新页面才能看到新行。同样的问题我有更新/删除方法，但我会在之后找到方法。

这适用于更新

所以要解释为什么我需要这样做：我有一堆照片，我需要为每张照片添加一个索引。

问题是我不能依赖我的 v-for 的索引，因为有时它是故意的“空箱”。

代码看起来像这样。

但是由于 vuejs 的反应性，我的索引将始终更新。

另一个解决方案可能是检查行上的计算 if，g-item但g-empty我什至不确定它是否可能，但不知道我能做到这一点有多精确。

我最好的选择是在显示上增加一个值，就像在 Smarty 或 Blade 等 PHP 模板渲染中完成的那样。但是由于 javascript 框架是响应式的，有没有办法做到这一点？

欢迎任何想法。

我有一个运行 Typescript 3.6.3 的 Vue 2.6.10 应用程序。

我声明了一个 Typescript 类，它为应用程序执行一些标准功能。我有一个插件将该类的实例分配给 Vue 的原型。

该实例化类的任何公共成员都不是反应式的，无论其类型如何。

我提炼了这个例子https://codepen.io/ColdToast/pen/KKwwjwY

班级

插件和应用

我遇到了 Vue 的问题，当元素失去焦点时，自定义输入上的 v-model 没有更新。

例如，如果我有两个这样的自定义输入元素，我在第一个输入一个值，然后快速制表到第二个，它会将第一个的值截断一个或两个字符。

这是自定义表单元素的 HTML 和在 keyup 上调用的方法：

这是它在模板中的初始化方式

当我去 checkInput 并打印出正在发出的文本时，如果我快速键入并跳到下一个输入，它会将值截断几个字符。例如，如果我输入“John Smith”，data.name 将等于“John Smi”。

v-on:keyup 在元素失去焦点后停止触发是否有任何原因。元素失去焦点后 v-model 没有更新的任何原因？