title: Link v-model to a object's property in Vue.js 2
body: <p>I use Vue.js 2 and I have this array, obtained from this API call (<a href="https://developers.themoviedb.org/3/genres/get-movie-list" rel="nofollow noreferrer">https://developers.themoviedb.org/3/genres/get-movie-list</a> this one) that I've used to make a <code>select</code> in HTML:</p>
  <pre><code> &quot;genres&quot;: [
          {
              &quot;id&quot;: 28,
              &quot;name&quot;: &quot;Azione&quot;
          },
          {
              &quot;id&quot;: 12,
              &quot;name&quot;: &quot;Avventura&quot;
          },
          {
              &quot;id&quot;: 16,
              &quot;name&quot;: &quot;Animazione&quot;
          },
          {
              &quot;id&quot;: 35,
              &quot;name&quot;: &quot;Commedia&quot;
          },
          {
              &quot;id&quot;: 80,
              &quot;name&quot;: &quot;Crime&quot;
          },
          {
              &quot;id&quot;: 99,
              &quot;name&quot;: &quot;Documentario&quot;
          },
          {
              &quot;id&quot;: 18,
              &quot;name&quot;: &quot;Dramma&quot;
          },
          {
              &quot;id&quot;: 10751,
              &quot;name&quot;: &quot;Famiglia&quot;
          },
          {
              &quot;id&quot;: 14,
              &quot;name&quot;: &quot;Fantasy&quot;
          },
          {
              &quot;id&quot;: 36,
              &quot;name&quot;: &quot;Storia&quot;
          },
          {
              &quot;id&quot;: 27,
              &quot;name&quot;: &quot;Horror&quot;
          },
          {
              &quot;id&quot;: 10402,
              &quot;name&quot;: &quot;Musica&quot;
          },
          {
              &quot;id&quot;: 9648,
              &quot;name&quot;: &quot;Mistero&quot;
          },
          {
              &quot;id&quot;: 10749,
              &quot;name&quot;: &quot;Romance&quot;
          },
          {
              &quot;id&quot;: 878,
              &quot;name&quot;: &quot;Fantascienza&quot;
          },
          {
              &quot;id&quot;: 10770,
              &quot;name&quot;: &quot;televisione film&quot;
          },
          {
              &quot;id&quot;: 53,
              &quot;name&quot;: &quot;Thriller&quot;
          },
          {
              &quot;id&quot;: 10752,
              &quot;name&quot;: &quot;Guerra&quot;
          },
          {
              &quot;id&quot;: 37,
              &quot;name&quot;: &quot;Western&quot;
          }
      ]
  }
  </code></pre>
  <p>What I want is to link the <code>v-model</code>, which is declared in Js as an empty string, to the property <code>id</code> of this array. I can't extract the property and use an array with only it, because options' name is a <code>v-for</code> that prints <code>genres.name</code> At the point I am now when I do the <code>console.log</code> on the <code>v-model</code> it returns an empty string, means that <code>v-model</code> doesn't take any value.
  The select is this:</p>
  <pre><code>        &lt;label for=&quot;title&quot;&gt;Title&lt;/label&gt;
          &lt;select id=&quot;title&quot; name=&quot;title&quot;
          @change=&quot;filterAlbums(selectedGenre)&quot;
          v-model=&quot;selectedGenre&quot;&gt;
              &lt;option value=&quot;&quot;&gt;All&lt;/option&gt;
              &lt;option v-for=&quot;genre in genresName&quot; value=&quot;&quot;&gt;{{genre.name}}&lt;/option&gt;
          &lt;/select&gt;
  </code></pre>
  <p>In data the v-model variable is declared this way:</p>
  <pre><code>selectedGenre: '',
  </code></pre>
  <p>I check the <code>v-model</code> status here in this function</p>
  <pre><code>filterAlbums(selectedGenre) {
     console.log(selectedGenre);
          }
  </code></pre>