Link v-model 到对象的属性 in Vue.js 2

Question

我使用 Vue.js 2 并且我有这个数组，它是从这个 API 调用（https://developers.themoviedb.org/3/genres/get-movie-list 这个）中获得的，我曾经用来制作一个 select在 HTML:

 "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"
        }
    ]
}

我要的是link这个在Js中声明为空字符串的v-model，到这个数组的属性id。我无法提取属性并只使用它的数组，因为选项的名称是 v-for 打印 genres.name 在我现在执行 console.log 在 v-model 上它 returns 是一个空字符串，意味着 v-model 没有任何值。 select 是这样的：

        <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);
        }

Answer 1

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

Answer 2

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

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

Link v-model 到对象的属性 in Vue.js 2

Link v-model to a object's property in Vue.js 2

javascript

select

object

vue.js

v-model

Link v-model 到对象的 属性 in Vue.js 2

Link v-model to a object's property in Vue.js 2

javascript

select

object

vue.js

v-model

Link v-model 到对象的属性 in Vue.js 2