Get value from array. Vue.js

Question

my problem is that I have an array and I don't know how to get ONLY value (of checked inputs) out of it. I mean... I can get a value/s but only in the form of an array.

SO basically when I select two inputs this is what I see: ["First", "Second"], instead of just: First, Second.

Here is my code:

<template>
 <input type="text"  v-model="title" />
 <ul>
  <li class="categories__li">
    <input type="checkbox" value="First" v-model="checkedCategories" />
    <label>Akcja</label>
  </li>
  <li class="categories__li">
    <input type="checkbox" value="Second" v-model="checkedCategories" />
    <label>Biograficzny</label>
  </li>
  <li class="categories__li">
    <input type="checkbox" value="Third" v-model="checkedCategories" />
    <label>Dramat</label>
  </li>
 </ul>
 <button @click="addItem()"></button>
 <div class="item" v-for="(item, index) in items" :key="index">
 <p>{{item.title}}</p>
 <p>{{item.categories}}</p>
 </div>
</template>

<script>
export default {
  name: "movielibrary",
  data() {
    return {
      items: [],
      title: "",
      checkedCategories: []
    },
    methods: {
    addItem() {
      this.items.push({
        title: this.title,
        categories: this.checkedCategories
      });
    },
  }
</script>

Ricky Ruiz · Accepted Answer · 2019-10-10 16:52:55Z

1

Convert the item.categories array into a string.

In the template, instead of:

<p>{{ item.categories }}</p>

Do:

<p>{{ item.categories.join(', ') }}</p>

edited Oct 10, 2019 at 16:52

answered Oct 10, 2019 at 16:39

Ricky Ruiz

27k7 gold badges48 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Get value from array. Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related