Vue Js Array Join Method : Vue.js provides an array join function which allows us to join the elements of an array into a single string An array is returned as a string by the join() function. The initial array remains unchanged after using the join() function. Although any separator can be used, by default, a comma(,) is used as a separator. An array can be changed into a string using the standard JavaScript join() method. We will describe how to convert an array into a string using the join function in Vue.js in this article. You can modify and run the code online by using our online editor.
Vue JS Convert Array to Comma Separated String
Converting a Vue JS array to a comma separated string can be accomplished using the join() method,You can use array.prototype.join() to turn your array item into a string separated by commas (,) given simply as below:
Vue Js Array Join Method | Example 1
<div id="app">
<p>Array : {{demoArray}}</p>
<button @click="myFunction">return array as string</button>
<p>String : {{result}}</p>
</div>
<script type="module">
import { createApp } from 'vue'
createApp({
data()
{
return{
demoArray:['Australia','England','America','India','China','Russia'],
result : ''
}
},
methods:{
myFunction(){
this.result = this.demoArray.join();
},
}
}).mount('#app')
</script>
The Output of above example is given below:
VueJS Convert Array to ‘or’ Separated String
You can use array.prototype.join("or") to turn your array item into a string separated by “or,” given simply as below:
Vue js Join() Function | Example 2
<div id="app">
<p>Array : {{demoArray}}</p>
<button @click="myFunction">return array as string</button>
<p>String : {{result}}</p>
</div>
<script type="module">
import { createApp } from 'vue'
createApp({
data()
{
return{
demoArray:['Australia','England','America','India','China','Russia'],
result : ''
}
},
methods:{
myFunction(){
this.result = this.demoArray.join(' or ');
},
}
}).mount('#app')
</script>
The Output of above example is given below:
