CODEWITHSUNDEEP
arraysvue.js
Dominika
Dominika

Reputation: 55

Get value from array. Vue.js

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>

Upvotes: 2

Views: 65

Answers (1)

Ricky Ruiz
Ricky Ruiz

Reputation: 26731

Convert the item.categories array into a string.

In the template, instead of:

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

Do:

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

Upvotes: 1

Related Questions