在 vuejs 数据数组中推送数据 .push 不是函数答案

【问题标题】：push data in vuejs data array .push is not a function在 vuejs 数据数组中推送数据 .push 不是函数
【发布时间】：2020-04-15 22:44:02
【问题描述】：

在我的 vue 组件中，我创建了一个名为“errorMessages”的数据数组

data() {
 return {
  errorMessages: Array
 };
},

我想在这个数据值中存储所有的错误信息

getErrorMessages(messages) {
  for (const msg in messages) {
    this.setErrorMessage(msg, messages[msg]);
  }
},
setErrorMessage(msg, messages){
  this.errorMessages.push({ msg: messages);
}

不幸的是，我收到消息 this.errorMessage.push is not a function

我也试过了

this.errorMessage = { ...message[msg] };

但是在这个数组中每个字母都是一个提交的值，比如

console.log(this.errorMessage)

会显示

{
  0: 't',
  1: 'h',
  2: 'i',
  3: 's',
  4: 'o',
  5: 'n',
  6: 'e',
}

我不使用 vuex，因为我的组件非常小，而且我想要任何一种方式，这将如何工作。

提前非常感谢！

【问题讨论】：

data() { return { errorMessages: [] }; }, 呢？

标签： arrays vue.js

【解决方案1】：

简短的回答是您需要通过以下方式初始化 errorMessages 属性...

data() {
     return {
      errorMessages: []
     };
},

解释...

首先，当您执行以下操作时...

data() {
 return {
  errorMessages: Array
 };
},

this.errorMessages 现在是对实际 Array 类的引用，而不是数组的实例。这就是为什么它说 push 方法不存在的原因。如果您将其值记录到控制台，这应该会更明显。

其次，当您执行以下操作时...

this.errorMessage = { ...message[msg] };

有些事情出了问题。在 JavaScript 和许多其他语言中，可以将字符串（在某种程度上）视为字符数组。例如，如果您获取一个字符串并访问一个索引（例如 str[0]），您将在该位置收到字符。如果你把这个想法应用到how the spread operator works，你实际上是从一个“数组”（在我们的例子中是一个字符串）中获取所有元素并将它们传播到一个对象中。

JavaScript 中的数组的核心也是具有数字属性名称（索引）的对象，并具有一些额外的内置功能。所以当你传播你的字符串值（message[msg]）时，它将获取每个“元素”（字符串中的每个字符）并在目标对象（errorMessages）中创建一个属性，其中属性名称是相应的索引和价值是性格。这就是为什么当您将其记录到控制台时会得到以下信息...

{
  0: 't',
  1: 'h',
  2: 'i',
  3: 's',
  4: 'o',
  5: 'n',
  6: 'e',
}

如果您创建以下数组const myArray = ['a', 'b', 'c']，然后再创建以下对象...const myObject = { ...myArray };，则更进一步，如果您将 myObject 记录到控制台，您将看到类似的结果。

希望有帮助！

【讨论】：