title: Vue Recommendation for Storing Variable Inside Templated Looping Structure?
body: <p>Given the following code</p>
  
  <pre><code>// Assuming records is an array of objects
  // Record is of the form {"fname": "John", "lname": "Smith", "dob": 1499994497871}
  // Field mapper is
  [
      {
          "name": "fname",
          "label": "First Name",
          "render": function(val){ return val}
      },
      {
          "name": "lname",
          "label": "Last Name",
          "render": function(val){ return val}
      },
      {
          "name": "dob",
          "label": "Date of Birth",
          "render": function(val){ return new Date(val).toDateString()}
      }
  ]
  
  // Assume findField returns the mapper instance for a given record in the records array
  
  &lt;div v-for="record in records"&gt;
      &lt;div&gt;
          &lt;table class="table"&gt;
              &lt;tbody&gt;
                  &lt;tr v-for="(value, key) in record"&gt;
                      &lt;th v-if="findField(key)"&gt;{{ findField(key).label }}&lt;/th&gt;
                      &lt;td v-if="findField(key)"&gt;{{ findField(key).render(value) }}&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm making four calls to findField().</p>
  
  <p>What's the Vue recommendation to storing variables inside looping structure?</p>
  
  <p>In other words, after the first <em>tr</em>, something like:</p>
  
  <pre><code>let localInstance = findField(key)
  </code></pre>