我已经有一个动态创建的现有表单。但是，我在向现有对象添加一组新的键值对时遇到了问题。我使用 this.$set() 方法使用了 Vue 反应性，仅在第一对上成功。

输出

预期产出

小提琴https://jsfiddle.net/stda7Lwm/

看法

JS

我想在我的 Vue 应用程序中收听所有关于输入的焦点事件。为了获得当前关注的输入，我考虑将document.activeElement属性绑定到我的应用程序组件中的计算属性，但这不是反应性的，为什么？

在数据中声明 activeElement 也不是反应式的。

观察者也一样！

让它工作的唯一方法是在输入本身的焦点/模糊事件之后简单地返回值，但这不符合我的需要。

有没有办法将文档或窗口属性绑定为响应式？

所以我认为我很好地理解了计算属性并且经常使用它们，但是我处于一种我不明白为什么没有反应发生的情况。

我正在尝试使用计算属性从 URL 数组中访问并返回一个字符串，它是一个图像 URL。

console.log 显示字符串（this.ImageStyleSources[1]来自 mixin 的 -- ）正是它应该是的，并且封装'url(' + ... + ')'与 CSS background-image 值完美匹配。

当我用它代表的字符串替换数据变量时，一切正常。所以我知道问题不是字符串本身，而是计算属性的更新。

在可能相关的注释中，存在一个问题（可能与 vue-devtools 相关），其中显示了重复的组件。在查看这些组件时，一组完全按照应有的方式更新。另一个则停留在该属性的原始返回值上。

为了更加清晰：

条件 ,(this.ImageStyleSources.length !==0)也是按预期计时的，因为它确定数组已从其空占位符更新。我也尝试过使用布尔 vue 数据而不是这种方法来标记更新数组的点。

使用 vue-fela 更新background-image:但尝试过的动态:style（使用字符串和对象语法）以及除 fela 之外的其他 css-in-js 解决方案，认为它们是反应性问题的原因......但似乎不是t 的情况。

问题：使用 mixin 时是否存在已知的反应性问题？this.ImageStyleSources在进口的mixin中。

另一个问题：有谁知道该怎么做？

我几乎很尴尬地说我已经花了两天多的时间反复撞到同一堵墙，所以感谢您的阅读。:)

乙

编辑：

我尝试使用计算属性返回值，而不是更新数据属性：

我也尝试使用观察者来更新数据，而不是：

还尝试在 mixin 中调用一个方法——就在数组更新并可用之后——而不是使用条件。

...但是我有同样的经历，不管我用什么方法来应用它（动态:style标签或 css-in-js）。元素的背景根本不会从数据属性的占位符字符串更新，或者如果不使用数据，它根本不会用返回的字符串更新。

我将 Vue 与 Vuex 一起使用。在一种情况下，我使用 Ajax 来获取表示值。在路上的某个地方，可能computed它不再是被动的。

在我的组件中：

Vuex商店：

Vuex 动作：

我用ajax调用一个url并返回一个promise。我也犯了一个突变。

Vuex 突变：

Vuex 吸气剂：

我已经确定了以下几点：

• 我将table.data状态设置为默认值以使其具有反应性
• 使用 getter 获取数据
• 使用 ajax 调用的动作
• 在操作中调用带有提交的突变

笔记：

• ajax 调用需要在一个动作中而不是在创建中，因为我presentation要从多个组件中使用。
• 我更喜欢不需要外部 Vue 插件的解决方案。

问题）

• 我错过了什么？
• 我怎样才能以最好的方式解决它？

我有一个文件叫Authenticator.coffee

...并且Page.vue我想显示id：

显示初始值，但不显示更改。确实发生了变化，我可以看到“身份验证状态已更改”消息与id.

导入值的变化不会反映在 中data()吗？
否则我该怎么做？

额外：我可以不做{{ user.id }}并且template只script包含import吗？

我正在使用 Quasar Framework 1.0.5、Vue 2.6、Vue-apollo。我有问题v-for

在浏览器控制台_vm.item is undefined中，即使数据在那里，我也会收到错误消息。

代码是这样工作的，在数据​​部分我将我的数组初始化为一个空数组。然后当用户点击时 vue-apollo 正在向后端发出请求并更新数组。

数据部分：

vue-apollo 更新函数（从 API 加载数据的地方）：

我正在使用阿波罗选项。

模板（在 PUG 中，生成 html）：

问题是最后一个{{item.city}}。那里说_vm.item is undefined。当我删除它时，没有错误。甚至 {{eventsByDay.length}}显示数组的正确长度 - 2。

元素在数组中：

知道我做错了什么吗？

我有一个自定义表格，其中包含通过在 Rows 上设置值的模式弹出窗口执行的操作。事情大部分都很好（对 Foo 和 Bar 的更新被发送到后端并设置在数据库中，重新加载页面会从数据库中提取数据并显示 foo/bar 已正确设置）。唯一不太好的部分是关于 Foo 的设置，表中的值不会更新。栏得到更新/反应。（模板使用 foo.name 和 bar.id）。有人对如何让 Foo 在表格中更新有任何想法吗？我已将 mustache 模板更改为使用 {{ foo.id }} 并且它会更新，但我需要 foo.name。

存在具有嵌套元素的数组，其属性取决于数据属性。问题是：为什么不反应？为此属性设置和获取 Vue 观察者集。但是当数据属性发生变化时（this.errorData.isNotServerError = true），具有嵌套元素且属性依赖于数据属性的数组中的属性不会更新。使用 Vue 打字。

''' private baseErrorLabelList = [ { condition: this.errorData.isNotServerError, text: this.$root.$t('login.error_label.not_server_error'), }, ]; '''

数组在上面。

''' private emptyErrorData = { isIncorrectDataProvided: false, isServerError: false, isNotServerError: false, }; private userData = Object.assign({}, this.emptyUserData); public errorData = Object.assign({}, this.emptyErrorData); ''' 数据属性。

即使删除分配，也没有任何工作。

所以我可以这样做（Pug& CoffeeScript）：

...但它只有在我手动更改浏览器中的输入时才有效。如果更改，输入不会更改其宽度v-model。

即使更改是由于反应性引起的，如何才能使输入宽度发生变化Vue？

我试图弄清楚如何经济地使用反应系统。我知道组件的 $options 用于非反应性数据，通常在 created() 或 mount() 方法中从其内部设置。但是有没有办法从父级传递 init 的非反应性道具？

举个简单的例子：

• 假设我有一个将值呈现为货币的组件。
• 99% 的时间货币是美元，
• 100% 的时间货币在实例化后不会改变。
• 但价值需要是被动的。
  （这是一个简单的例子，只是为了展示这个概念）

但我不想在货币上花费观察者，因为它永远不会改变。

我可以以某种方式将其作为无人关注的 $option 传递吗？还有另一种方法吗？还是观察者如此便宜，以至于我不应该担心大规模的效率？

感谢您的任何帮助！