VueJS如何将v-model与数组的特定元素一起使用？答案

【问题标题】：VueJS how to use v-model with a specific element of an array?VueJS如何将v-model与数组的特定元素一起使用？
【发布时间】：2020-06-14 17:07:18
【问题描述】：

我正在开发一个网站，您可以在其中创建、查看和喜欢电影的播放列表。

在具有“/playlistid”路由的“播放列表页面”中，有一个复选框，我将其用作“喜欢按钮”。

基本上我从我的服务器加载一个数组（我们称之为“收藏夹”），其中包含我从 this.$route.params.id 中获取的 ID，当您单击喜欢时。

现在，如何将 v-model 与我的本地（已加载）数组绑定，以检查 $route.params.id 是否包含在其中，并检查输入是否为真？

这是我的代码。

HTML 方面：

<label v-if="like" class="ml-2">
   <input type="checkbox" class="heart" @change="checkLike" v-model='favorites.includes(this.$route.params.id)'>
   <span></span>
</label>

脚本端：

data () {
      return {
        favorites: []
      }
},
methods: {
   checkLike() {
      if (this.favorites.includes(this.$route.params.id)) {

            this.favorites.splice(this.$route.params.id, 1);
            axios.patch(...)

      } else if (!this.favorites.includes(this.$route.params.id)) {

            this.favorites.push(this.$route.params.id)
            axios.patch(...)

      }
   }

在 v-model 中使用 contains() 或 indexOf() 显然不起作用，那么我该怎么做呢？提前感谢您的帮助。

【问题讨论】：

标签： javascript vue.js vuejs2 v-model

【解决方案1】：

我认为您尝试使用错误的 v-model。 v-model 用于组件数据的双向绑定以响应事件。因此，如果您想存储所有选定的喜爱电影的值，您可以使用 v-model 非常简单地做到这一点。

<input type="checkbox" id="1" value="movie1" v-model="favorites">
<label for="movie1">Best One</label>

<input type="checkbox" id="2" value="movie2" v-model="favorites">
<label for="movie2">Okay movie</label>

    data () {
      return {
        favorites: []
      }
   },

现在，每个复选框的选择都将与我们的数据值保持同步。因此，如果我们选中 Best One，该电影的值将进入数组，如果我们取消选中它，该值将从该数组中弹出。您可以根据需要添加任意数量，并使用我们数据中的相同状态。视图让我们这样做是非常神奇的。查看更多精彩示例in the docs here

【讨论】：