title: Vue 2.6.10 - How to fix 'Property or method "index" is not defined on the instance but referenced during render.' in v-for loop
body: <p>I've created a data table that will take data from an API and display it nicely. I want the user to be able to double click on any row and have a modal component pop up that displays the information of that row.</p>
  <p>The data is an array of objects:</p>
  <pre><code>[
      { text: 'some data 1', value: 'some info 1' },
      { text: 'some data 2', value: 'some info 2' },
      { text: 'some data 3', value: 'some info 3' },
      { text: 'some data 4', value: 'some info 4' },
  ]
  </code></pre>
  <p>I've tried binding the object to the component directly, making the parts of the table their own components, using <code>$emit</code>, and now using the original value from the for loop and an index but nothing has worked for me.</p>
  <p>This is what I use to create the table after I make the headers:</p>
  <pre><code>&lt;tr class=&quot;notheader&quot; v-for=&quot;(sortedobject,index) in sortedvalues&quot;
      v-on:dblclick=&quot;$emit('open', sortedobject); showModal = true;&quot;&gt;
      &lt;!-- Many &lt;td&gt;&lt;/td&gt; --&gt;
      &lt;modal v-bind:modaldata=&quot;sortedvalues[index]&quot; v-on:close=&quot;showModal = false&quot; v-if=&quot;showModal&quot;&gt;
          &lt;h1 slot=&quot;header&quot;&gt;Nonsense header&lt;/h1&gt;
      &lt;/modal&gt;
  &lt;/tr&gt;
  </code></pre>
  <p>This is my component:</p>
  <pre><code>var Child = {
      template: '#modal-template',
      props: ['modaldata'],
      mounted: function () {
          this.$parent.$on('update', this.setValue);
      }
  };
  </code></pre>
  <p>The template is just a wireframe of what it should look like.</p>
  <p>I expect <code>modaldata</code> to contain all the data from the object for that row, but I get undefined and the error I am currently getting is:</p>
  <blockquote>
  <p>[Vue warn]: Property or method &quot;index&quot; is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: <a href="https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties</a>.</p>
  </blockquote>