title: How can I handle events in datalist options in vuejs?
body: <p>I have a requirement where I have to suggest in the data list and when a user selects any of the datalist options, I have to update other input fields accordingly.</p>
  
  <p>Here is my input field and Datalist code.</p>
  
  <pre><code>&lt;input type="text" v-model="party.name" class="form-control form-control-sm shadow-sm" @input="searchPartyByName()" placeholder="Party name" list="queriedParties"/&gt;
  
  &lt;datalist id="queriedParties"&gt;
      &lt;option v-for="party in queriedParties"&gt;{{party.name}}&lt;/option&gt;
  &lt;/datalist&gt;
  </code></pre>
  
  <p>Now, what I want is, When a user hits <code>enter</code> or <code>click</code> on specific data list option, I want to update my this input field (Which is by default with data list) but I also want to set other form fields.</p>
  
  <p>I have bound other form fields with my <code>party</code> data object. So, Only if I can update my <code>party</code> data object by any event on datalist option, I will be happy! I want something like this.</p>
  
  <pre><code>&lt;option v-for="party in queriedParties" @click="setParty(party)"&gt;{{party.name}}&lt;/option&gt;
  </code></pre>
  
  <p>I already tried the above-given example but it's not working. I also tried with <code>@change</code> but it's not working too!</p>
  
  <p>Is there any way to accomplish this? I checked almost all the articles, jsfiddles and codepens available but none of them solves my issue.</p>