<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">Sometimes when I'm using <code class="notranslate">v-for</code>, I feel the need to have a local variable to store the intermediate result from a function call to avoid duplication and unnecessary calls. Others may find the need to give an alias to a property deep in an object.</p>
<p dir="auto">Begin with the code:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;tbody&gt;
  &lt;tr v-for=&quot;hour in HOURS&quot; :key=&quot;hour.key&quot;&gt;
    &lt;td v-for=&quot;day in DAYS&quot; :key=&quot;day.key&quot;&gt;
      &lt;input
        :id=&quot;`classTime_${makeTime(day, hour)}`&quot;
        v-model=&quot;filters.classTimes&quot;
        :value=&quot;makeTime(day, hour)&quot;
        type=&quot;checkbox&quot;
      &gt;
      &lt;label :for=&quot;`classTime_${makeTime(day, hour)}`&quot;&gt;
        {{ makeTime(day, hour) }}
      &lt;/label&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
&lt;/tbody&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">tbody</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">tr</span> <span class="pl-c1">v-for</span>="<span class="pl-s">hour in HOURS</span>" <span class="pl-c1">:key</span>="<span class="pl-s">hour.key</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">td</span> <span class="pl-c1">v-for</span>="<span class="pl-s">day in DAYS</span>" <span class="pl-c1">:key</span>="<span class="pl-s">day.key</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">input</span>
        <span class="pl-c1">:id</span>="<span class="pl-s">`classTime_${makeTime(day, hour)}`</span>"
        <span class="pl-c1">v-model</span>="<span class="pl-s">filters.classTimes</span>"
        <span class="pl-c1">:value</span>="<span class="pl-s">makeTime(day, hour)</span>"
        <span class="pl-c1">type</span>="<span class="pl-s">checkbox</span>"
      <span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">label</span> <span class="pl-c1">:for</span>="<span class="pl-s">`classTime_${makeTime(day, hour)}`</span>"<span class="pl-kos">&gt;</span>
        {{ makeTime(day, hour) }}
      <span class="pl-kos">&lt;/</span><span class="pl-ent">label</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">td</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;/</span><span class="pl-ent">tr</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">tbody</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">The <code class="notranslate">makeTime()</code> function was written and called with the same arguments 4x times in each iteration.</p>
<p dir="auto">In order to simplify this code, I use a workaround that uses <code class="notranslate">v-for</code> with a single-value array:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;tbody&gt;
  &lt;tr v-for=&quot;hour in HOURS&quot; :key=&quot;hour.key&quot;&gt;
    &lt;td v-for=&quot;day in DAYS&quot; :key=&quot;day.key&quot;&gt;
      &lt;template v-for=&quot;time in [makeTime(day, hour)]&quot; :key=&quot;time&quot;&gt;
        &lt;input
          :id=&quot;`classTime_${time}`&quot;
          v-model=&quot;filters.classTimes&quot;
          :value=&quot;time&quot;
          type=&quot;checkbox&quot;
        &gt;
        &lt;label :for=&quot;`classTime_${time}`&quot;&gt;
          {{ time }}
        &lt;/label&gt;
      &lt;/template&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
&lt;/tbody&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">tbody</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">tr</span> <span class="pl-c1">v-for</span>="<span class="pl-s">hour in HOURS</span>" <span class="pl-c1">:key</span>="<span class="pl-s">hour.key</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">td</span> <span class="pl-c1">v-for</span>="<span class="pl-s">day in DAYS</span>" <span class="pl-c1">:key</span>="<span class="pl-s">day.key</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">template</span> <span class="pl-c1">v-for</span>="<span class="pl-s">time in [makeTime(day, hour)]</span>" <span class="pl-c1">:key</span>="<span class="pl-s">time</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">input</span>
          <span class="pl-c1">:id</span>="<span class="pl-s">`classTime_${time}`</span>"
          <span class="pl-c1">v-model</span>="<span class="pl-s">filters.classTimes</span>"
          <span class="pl-c1">:value</span>="<span class="pl-s">time</span>"
          <span class="pl-c1">type</span>="<span class="pl-s">checkbox</span>"
        <span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">label</span> <span class="pl-c1">:for</span>="<span class="pl-s">`classTime_${time}`</span>"<span class="pl-kos">&gt;</span>
          {{ time }}
        <span class="pl-kos">&lt;/</span><span class="pl-ent">label</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;/</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">td</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;/</span><span class="pl-ent">tr</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">tbody</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">It would be nice to have a dedicated directive to add the local variables.</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto">I'd like to add a dedicated directive for using local variables like this:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;template v-local=&quot;{ time: makeTime(day, hour), myLocal: my.property.within.a.deep.deep.object }&quot;&gt;
  &lt;!-- templates inside will have access to the `time` and `myLocal` variables --&gt;
&lt;/template&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">template</span> <span class="pl-c1">v-local</span>="<span class="pl-s">{ time: makeTime(day, hour), myLocal: my.property.within.a.deep.deep.object }</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-c">&lt;!-- templates inside will have access to the `time` and `myLocal` variables --&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span></pre></div>
<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">This option would allow a user to override the filter that determines what JS files get automatically injected into the generated HTML. Presently, I think this can be achieved by Manual Asset Injection (<a href="https://ssr.vuejs.org/guide/build-config.html#client-config" rel="nofollow">https://ssr.vuejs.org/guide/build-config.html#client-config</a>) but if the only thing a user wants to control is which bundle gets injected in a multi-compiler Webpack setup, then this creates A LOT of extra work for them as they try to duplicate all the things that vue-server-renderer would do for them by default.</p>
<p dir="auto">My specific use case is that I'm generating a JS bundle for each language that we want our application to support using i18n-webpack-plugin. When using vue-server-renderer, the last language bundle generated is automatically injected. This feature would allow me to instead add logic to <code class="notranslate">createContext</code> that looks at a request's locale header, generates a filter function based on that header, and uses that filter function to assure that a matching (or a default) bundle is injected in the returned page.</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto">Adding this variable to the <code class="notranslate">renderScripts</code> method:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const jsFilter = context.jsFilter || (({ file }) =&gt; isJS(file))"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">jsFilter</span> <span class="pl-c1">=</span> <span class="pl-s1">context</span><span class="pl-kos">.</span><span class="pl-c1">jsFilter</span> <span class="pl-c1">||</span> <span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">{</span> file <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-en">isJS</span><span class="pl-kos">(</span><span class="pl-s1">file</span><span class="pl-kos">)</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">And passing <code class="notranslate">jsFilter</code> to the filter calls in that method instead of the default, <code class="notranslate">({ file }) =&gt; isJS(file)</code>.</p>