从数组中获取值。 Vue.js

Question

我的问题是我有一个数组，但我不知道如何从中获取（已检查输入的）唯一值。 我的意思是......我可以得到一个值，但只能以数组的形式。

所以基本上当我选择两个输入时，我看到的是：[“First”，“Second”]，而不仅仅是：First，Second。

这是我的代码：

<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>

Answer 1

将item.categories 数组转换为字符串。

在模板中，而不是：

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

做：

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