How not to present in html the keys of a vector in VUE.js application

Question

I’m playing a simple application with Vue.js, when checking some checkbox the options marked are shown in Html, until then it works normal, only the problem is that the brackets of the vector keep appearing tbm. You can’t introduce them.

var app = new Vue({

  el: '#app',
  data: {														
    frames: Array()
  }

})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<link rel="stylesheet" href="assets/css/main.css"/>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">

<label>QUAIS FRAMEWORKS MAIS GOSTA?</label><br>
<input type="checkbox" value="VUE" v-model="frames">VUE
<input type="checkbox" value="REACT" v-model="frames">REACT
<input type="checkbox" value="ANGULAR" v-model="frames">ANGULAR 

<p> Resposta: {{ frames }} </p>

</div>

Answer 1

Only use the method join to transform the array into a string, separating the elements by comma ( or any other separator you want ).

<p> Resposta: {{ frames.join(', ') }} </p>

See working

var app = new Vue({

  el: '#app',
  data: {														
    frames: Array()
  }

})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<link rel="stylesheet" href="assets/css/main.css"/>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">

<label>QUAIS FRAMEWORKS MAIS GOSTA?</label><br>
<input type="checkbox" value="VUE" v-model="frames">VUE
<input type="checkbox" value="REACT" v-model="frames">REACT
<input type="checkbox" value="ANGULAR" v-model="frames">ANGULAR 

<p> Resposta: {{ frames.length === 0 ? 'Selecione um Framework': frames.join(', ') }} </p>

</div>

Reference:

• Array.prototype.Join()