vuejs 拆分为字符串到数组答案

【问题标题】：vuejs split to string to arrayvuejs 拆分为字符串到数组
【发布时间】：2021-04-01 16:42:31
【问题描述】：

我有一个在文本框中格式化为逗号分隔的字符串，但是当我尝试将其拆分为数组以循环遍历它们时，我得到了错误

Type 'string[]' is not assignable to type 'string'

我的文本框（使用 ionic，但在渲染时基本上只是一个文本区域

<ion-textarea type="text" v-model="CSVItems" placeholder="e.g. chicken, rice, peas"></ion-textarea>

数据/方法如下（删减至发帖所需）

 data() {
    return {
      CSVItems: "",
      myResult: "",
    };
  },
  methods: {
     addItem: function() {
      this.myResult = this.CSVItems.split(",");
  },

【问题讨论】：

split 返回一个数组。看起来 vuejs 正在强制执行类型。

标签： javascript arrays vue.js ionic-framework

【解决方案1】：

错误是关于尝试将字符串数组存储到声明为字符串的属性中。要告知 tslint 正确的类型，请将 myResult 实例化为字符串数组：

data: () => ({
  CSVItems: "",
  myResult: [] as string[]
})

此外，您可能还想在分配之前进行修剪：

this.myResult = this.CSVItems.split(',').map(s => s.trim());

【讨论】：

【解决方案2】：

字符串上的 javascript split function 返回一个数组。要将其转换为字符串，您可以使用Array.join 将它们再次转换为字符串

例如


let CSVItems = "Hello,World!"

console.log(CSVItems.split(',')
// ["Hello", "World!"]


// Array.join's parameter is what to append with Ex [1,2,3].join("t") = "1t2t3"
console.log(CSVItems.split(',').join(' '))
// "Hello World!"

如果你希望 myResult 是一个数组，你必须将它设置为一个


 data() {
    return {
      CSVItems: "",
      myResult: [], // Make [] not ""
    };
  },
  methods: {
     addItem: function() {
      this.myResult = this.CSVItems.split(",");
  },

【讨论】：