javascript - VueJS : Why does this. $set() 抛出错误？

Question

我使用 $set 方法让 Vue 知道该对象已更改，并且它不断抛出以下错误。我是否滥用了该方法？

错误

TypeError: exp.trim is not a function. (In 'exp.trim()', 'exp.trim' is undefined)

上下文

<template>
<div class="panel-heading" @click="expandAction(action, $index)">
  <div class="panel-title">
    <span>{{ action.display }}</span>
  </div>
  <div class="panel-body" v-show="action.expanded">
  ...
  </div>
</div>
<template>

<script>
expandAction: function (action, index) {
  this.collapseActions();

  // Works, but Vue doesn't detect change
  // action.expanded = true;

  // Throws error
  this.$set(this.$data.actionRepository, `actions[${index}].expanded`, true);
},
</script>

Answer 1

对于 Vue 1.x:

根据 @Donnie 的澄清，重要的是要强调 this.$set 的行为在 Vue 1 和 Vue 2 之间发生了变化。

在 Vue 1 中，this.$set 期望更新您在其中调用它的组件上的数据参数，而在 Vue 2 中，它是 Vue.set 的别名。

因此，要在 Vue 1 中实现此目的，您可以调用 Vue.set:

Vue.set(this.actionRepository.actions[index], 'expanded', true)

http://v1.vuejs.org/api/#Vue-set

或

this.$set(`actionRepository.actions[${index}].expanded`, true)

http://v1.vuejs.org/api/#vm-set

对于 Vue 2:

this.$set(this.actionRepository.actions[index], 'expanded', true)

也就是说，如果您要创建 expanded 的新参数，则只需要使用 $set 。如果它已经存在，您可以:

this.actionRepository.actions[index].expanded = true

<小时/>

如果您将操作对象传递给该方法，那么您还可以使用:

this.$set(action, 'expanded', true)

<小时/>