<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">Having multiple event handlers that call the very same function add noise to the templates.<br>
I propose to DRY that a bit.</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto">Currently you can pass multiple functions to a single event handler like so:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;component
     @click=&quot;func1(); func2()&quot;
&gt;&lt;/component&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">component</span>
     <span class="pl-c1">@click</span>="<span class="pl-s">func1(); func2()</span>"
<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">component</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">However, I think it would be really handy to be able to do the inverse, ie. passing the same function to multiple event handlers.<br>
Today for instance I have to do this:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;component v-model.number=&quot;foo&quot;
    @doDelayedStuff=&quot;delayedStuff&quot;
    @wheel.native=&quot;delayedStuff&quot;
    @mouseenter.native=&quot;callFooUpdate&quot;
    @focus.native=&quot;callFooUpdate&quot;
    @keyup.native=&quot;callBar&quot;
    @mouseleave.native=&quot;callFooClear&quot;
    @blur.native=&quot;callFooClear&quot;
    @change.native=&quot;callFooClear&quot;
    @click.prevent=&quot;doStuff&quot;
    @keyup.75=&quot;doStuff&quot;
&gt;&lt;/component&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">component</span> <span class="pl-c1">v-model.number</span>="<span class="pl-s">foo</span>"
    <span class="pl-c1">@doDelayedStuff</span>="<span class="pl-s">delayedStuff</span>"
    <span class="pl-c1">@wheel.native</span>="<span class="pl-s">delayedStuff</span>"
    <span class="pl-c1">@mouseenter.native</span>="<span class="pl-s">callFooUpdate</span>"
    <span class="pl-c1">@focus.native</span>="<span class="pl-s">callFooUpdate</span>"
    <span class="pl-c1">@keyup.native</span>="<span class="pl-s">callBar</span>"
    <span class="pl-c1">@mouseleave.native</span>="<span class="pl-s">callFooClear</span>"
    <span class="pl-c1">@blur.native</span>="<span class="pl-s">callFooClear</span>"
    <span class="pl-c1">@change.native</span>="<span class="pl-s">callFooClear</span>"
    <span class="pl-c1">@click.prevent</span>="<span class="pl-s">doStuff</span>"
    <span class="pl-c1">@keyup.75</span>="<span class="pl-s">doStuff</span>"
<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">component</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">It would be great if you could instead do that:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;component v-model.number=&quot;foo&quot;
    @[doDelayedStuff, wheel.native]=&quot;delayedStuff&quot;
    @[mouseenter.native, focus.native]=&quot;callFooUpdate&quot;
    @keyup.native=&quot;callBar&quot;
    @[mouseleave.native, blur.native, change.native]=&quot;callFooClear&quot;
    @[click.prevent, keyup.75]=&quot;doStuff&quot;
&gt;&lt;/component&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">component</span> <span class="pl-c1">v-model.number</span>="<span class="pl-s">foo</span>"
    <span class="pl-c1">@[doDelayedStuff,</span> <span class="pl-c1">wheel.native]</span>="<span class="pl-s">delayedStuff</span>"
    <span class="pl-c1">@[mouseenter.native,</span> <span class="pl-c1">focus.native]</span>="<span class="pl-s">callFooUpdate</span>"
    <span class="pl-c1">@keyup.native</span>="<span class="pl-s">callBar</span>"
    <span class="pl-c1">@[mouseleave.native,</span> <span class="pl-c1">blur.native,</span> <span class="pl-c1">change.native]</span>="<span class="pl-s">callFooClear</span>"
    <span class="pl-c1">@[click.prevent,</span> <span class="pl-c1">keyup.75]</span>="<span class="pl-s">doStuff</span>"
<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">component</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">That way you can more clearly see in one glance how many different behavior are attached to a component. Also, modifying the callbacks is easier.</p>
<p dir="auto">Thoughts? <g-emoji class="g-emoji" alias="smile" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f604.png">😄</g-emoji></p>
<h3 dir="auto">What problem does this feature solve?</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="So far  a hack such as
&lt;template&gt;
{{foo}}
&lt;/template&gt;

//js
var promise = new Promise(s=&gt;setTimeout(s(1)))
{
    data:{foo:''},
    computed:{
        async bar(){
            return await promise
        }
    },
    watch:{
        async bar(){
            this.foo = await bar
        }
    }
}

"><pre class="notranslate"><code class="notranslate">So far  a hack such as
&lt;template&gt;
{{foo}}
&lt;/template&gt;

//js
var promise = new Promise(s=&gt;setTimeout(s(1)))
{
    data:{foo:''},
    computed:{
        async bar(){
            return await promise
        }
    },
    watch:{
        async bar(){
            this.foo = await bar
        }
    }
}


</code></pre></div>
<h3 dir="auto">What does the proposed API look like?</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;template&gt;
{{await foo}}
&lt;/template&gt;

//js
var promise = new Promise(s=&gt;setTimeout(s(1)))
{
    computed:{
        async foo(){
            return await promise
        }
    },
}

"><pre class="notranslate"><code class="notranslate">&lt;template&gt;
{{await foo}}
&lt;/template&gt;

//js
var promise = new Promise(s=&gt;setTimeout(s(1)))
{
    computed:{
        async foo(){
            return await promise
        }
    },
}


</code></pre></div>