在 Vue.js 2 中将 v-model 链接到对象的属性答案

【问题标题】：Link v-model to a object's property in Vue.js 2在 Vue.js 2 中将 v-model 链接到对象的属性
【发布时间】：2021-07-26 01:01:47
【问题描述】：

我使用 Vue.js 2 并且我有这个数组，从这个 API 调用（https://developers.themoviedb.org/3/genres/get-movie-list 这个）获得，我用它在 HTML 中创建了一个select：

 "genres": [
        {
            "id": 28,
            "name": "Azione"
        },
        {
            "id": 12,
            "name": "Avventura"
        },
        {
            "id": 16,
            "name": "Animazione"
        },
        {
            "id": 35,
            "name": "Commedia"
        },
        {
            "id": 80,
            "name": "Crime"
        },
        {
            "id": 99,
            "name": "Documentario"
        },
        {
            "id": 18,
            "name": "Dramma"
        },
        {
            "id": 10751,
            "name": "Famiglia"
        },
        {
            "id": 14,
            "name": "Fantasy"
        },
        {
            "id": 36,
            "name": "Storia"
        },
        {
            "id": 27,
            "name": "Horror"
        },
        {
            "id": 10402,
            "name": "Musica"
        },
        {
            "id": 9648,
            "name": "Mistero"
        },
        {
            "id": 10749,
            "name": "Romance"
        },
        {
            "id": 878,
            "name": "Fantascienza"
        },
        {
            "id": 10770,
            "name": "televisione film"
        },
        {
            "id": 53,
            "name": "Thriller"
        },
        {
            "id": 10752,
            "name": "Guerra"
        },
        {
            "id": 37,
            "name": "Western"
        }
    ]
}

我想要的是将在Js中声明为空字符串的v-model链接到该数组的属性id。我无法提取该属性并仅使用它的数组，因为选项的名称是一个 v-for 打印 genres.name 现在我在 v-model 上执行 console.log 它返回一个空字符串，表示v-model 不带任何值。选择是这样的：

        <label for="title">Title</label>
        <select id="title" name="title"
        @change="filterAlbums(selectedGenre)"
        v-model="selectedGenre">
            <option value="">All</option>
            <option v-for="genre in genresName" value="">{{genre.name}}</option>
        </select>

在数据中，v-model 变量是这样声明的：

selectedGenre: '',

我在这个函数中检查v-model的状态

filterAlbums(selectedGenre) {
   console.log(selectedGenre);
        }

【问题讨论】：

标签： javascript vue.js object select v-model

【解决方案1】：

你的意思是这个数组是一个元素列表，可以作为选择中的选项吗？如果是，则需要将每个选项值（之前由 v-for 在循环中生成）与元素 id 绑定：

<select v-model="someValueWithInitialEmptyString">
   <option v-for="element in genres" :key="element.id" :value="element.id">
      {{element.name}}
   </option>
</select>

【讨论】：

正是这个！谢谢！

【解决方案2】：

您如何将此数组链接到该属性？这个数组是从哪里来的？您应该显示更多代码。

【讨论】：

完成，请告诉我需要的其他信息