除非我使用此解决方法，否则 Vue 变量不会呈现内存中存在的内容答案

【问题标题】：Vue variable isn't rendering what exists in memory unless I use this workaround除非我使用此解决方法，否则 Vue 变量不会呈现内存中存在的内容
【发布时间】：2018-07-24 18:03:32
【问题描述】：

我有显示所选选项的代码。你会注意到有一个v-model="selectedOption.value" 和一个{{selectedOption.value}}

<h6 class="label">Select {{selectedOption.option_type}}: {{selectedOption.value}}</h6>
<span v-for="option in product.itemOptions">
  <label v-if="option.opt_type === selectedOption.option_type">
    <span>{{option.ito_notes}}</span>
    <input type="radio" :name="option.opt_type" :value="option.ito_notes" v-model="selectedOption.value" />
    <img :src="optionImage(option.vendid, option.option_pk)" class="option_image image is-48x48">
  </label>
</span>

您希望它们匹配，但在这种情况下它不是，如下面的屏幕截图所示，将浏览器窗口与 Chrome Vue 开发工具插件进行比较。

但是通过将@change="nothing()" 添加到输入中，让它触发在<span v-if="genericToggle"></span> 的v-if 中使用的切换，{{selectedOption.value}} 在更改时呈现。所以我的模板变成了：

<h6 class="label">Select {{selectedOption.option_type}}: {{selectedOption.value}}</h6>
<span v-if="genericToggle"></span>
<span v-for="option in product.itemOptions">
  <label v-if="option.opt_type === selectedOption.option_type">
    <span>{{option.ito_notes}}</span>
    <input type="radio" :name="option.opt_type" :value="option.ito_notes" v-model="selectedOption.value"  @change="nothing()"/>
    <img :src="optionImage(option.vendid, option.option_pk)" class="option_image image is-48x48">
  </label>
</span>

而nothing() 方法就是这样：

nothing() {
  this.genericToggle = !this.genericToggle;
},

我使用的是 Vue 2.5.16。

为什么{{selectedOption.value}} 没有呈现浏览器在内存中的值，我该如何正确解决这个问题？

更新：

selectedOptions 是product 的属性，属性初始化为null，然后在加载时使用包含selectedOptions 作为属性的对象通过ajax 进行更新。

【问题讨论】：

在 selectedOption 定义的地方显示你的数据函数。很可能是因为 -> vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
@Aldarund 它是product 的一个属性，该属性被初始化为null，然后在加载时通过ajax 更新一个包含selectedOptions 作为属性的对象。
好吧，因为它为空，这将是因为我在上面发布的链接。你需要使用 Vue.set/this.$set
@Aldarund 在玩了一些之后，就是这样，文档中的解决方案效果很好。谢谢！

标签： javascript vue.js

【解决方案1】：

感谢 Aldarund 链接到这个解释： https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

由于现代 JavaScript 的限制（以及 Object.observe 的废弃），Vue 无法检测到属性的添加或删除。由于 Vue 在实例初始化期间执行 getter/setter 转换过程，因此数据对象中必须存在一个属性，以便 Vue 对其进行转换并使其具有响应性。

就我而言，通过在输入更改时运行它，我能够更干净地解决问题。

updateSelectOptionValue(index, value) {
  this.product = Object.assign({}, this.product, this.product);
},

这应该被重构为更有针对性，所以它不会重新分配整个对象，但基本思想就在这里。

【讨论】：