title: Datalist - how to launch function on click option?
body: <p>I have a problem with <code>datalist</code> with my <code>input</code> search in VueJS, why when i click with mouse or with enter on one of the option on my <code>datalist</code>, my function <code>getData()</code> which is called to <code>@click</code> and <code>@keypress.enter</code> is not launched?</p>
  <p>here is my code:</p>
  <p>template:</p>
  <pre><code>          &lt;input
              list=&quot;data&quot;
              v-model.trim=&quot;searchBy&quot;
              @keyup.enter=&quot;getAllDatas&quot;
              type=&quot;text&quot;
              placeholder=&quot;Find more data...&quot;
            /&gt;
            &lt;br /&gt;
            &lt;datalist id=&quot;data&quot;&gt;
                &lt;option v-for=&quot;r in repos.items&quot; 
                        :key=&quot;r.id&quot; 
                        :value=&quot;r.name&quot;
                        @click=&quot;getData(r.id)&quot;
                        @keypress.enter=&quot;getData(r.id)&quot;  /&gt;
            &lt;/datalist&gt;
  </code></pre>
  <p>script:</p>
  <pre><code> methods: {
      getAllDatas() {
        fetch(`someURL`)
          .then(res =&gt; res.json())
          .then(
            res =&gt; {
              this.data = res
            }
          )
      },
      ...mapActions([&quot;fetchData&quot;]),
      async getData() {
         await this.fetchData();
    },
  </code></pre>
  <p>i totally have no idea what is wrong here, can someone tell me?</p>