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

Question

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

Navigation

#1 by (1 votes)

0

I'm working on a simple application with Vue.js, when checking some checkbox the marked options are presented in the Html, so it works normal, but the problem is that the vector brackets appear as well. You can not present 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><divid="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>

javascript vue.js

asked by anonymous 27.06.2018 / 22:51

1 answer

How to insert this text in PostgreSQL? Error creating Diagrams in SQLServer Studio 2014

score 1 · Accepted Answer

Only use the join method to transform the array in a string, separating the elements by the 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><divid="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 ()