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澄清之后，重要的是要强调这个。$ set的行为在Vue 1＆amp;之间发生了变化。 Vue 2。

在Vue 1中。$ 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)

如果您要创建$set的新参数，则表示您只需要使用expanded。如果它已经存在，您可以：

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

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

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

VueJS：为什么这样。$ set（）抛出错误？

1 个答案:

对于Vue 1.x：

对于Vue 2：