How to Convert String to Array in Vue JS?

In Vue.js, a tool for making web interfaces, you might sometimes need to turn a string into an array. This helps you work with your data better. This guide shows you different ways to do this so you can use Vue.js to handle your data more effectively.

Methods for Converting String to Array in Vue.js:

Method 1: Using JavaScript’s `split()` Method

Vue.js uses JavaScript’s features, like the split() method, to change strings into arrays. Here’s how it’s done:
Vue js Code

<template>
<div>
    <button @click="convertStringToArray">Convert</button>
    <p>{{ convertedArray }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myString: "apple,banana,cherry",
      separator: ",",
      convertedArray: [],
    };
  },
  methods: {
    convertStringToArray() {
      this.convertedArray = this.myString.split(this.separator);
    },
  },
};
</script>

In this example, we use the `split()` method to split the `myString` using the `separator`, which is a comma in this case.

The component initially displays the “Convert” button followed by an empty array `[]`. The below output when the user clicks the “Convert” button.

Output:-
[apple, banana, cherry]

Sign up and avail $100 free credits now!!

Method 2: Using Vue.js Computed Properties

Computed properties in Vue.js are ideal for dynamic data transformations. You can create a computed property to convert a string to an array like this:
Vue js Code

<template>
  <div>
    <p>{{ myArray }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myString: "apple,banana,cherry",
      separator: ",",
    };
  },
  computed: {
    myArray() {
      return this.myString.split(this.separator);
    },
  },
};
</script>

In this example, the `myArray` computed property updates automatically whenever `myString` changes, providing a reactive array.

Executing the provided code will produce the following output.

Output:-
["apple", "banana", "cherry"]

Register and get Auto Scalable instances with a Pay-As-You-Go Pricing Model!

Method 3: Using a Custom Vue.js Computed Property

In Vue.js, computed properties are custom functions that can be applied to template data. You can use a computed property to achieve the same result as a custom filter, converting a string to an array:
Vue js Code

<template>
<div>
<p>{{ myArray }}</p>
</div>
</template>
<script>
export default {
data() {
return {
myString: "apple,banana,cherry",
separator: ",",
};
},
computed: {
myArray() {

Output:-
[ "apple", "banana", "cherry" ]

Conclusion

In Vue.js, converting a string to an array is a typical task for data manipulation. You can do this using JavaScript’s split() method, computed properties, or custom filters. Select the approach that suits your project’s needs to handle string data in Vue.js effectively.