title: How to set a valid prop path for nested data on a table - Element UI - Vue JS
body: <p>I'm trying to validate a form, part of which is represented in a table using element-ui. But I can't pass a valid prop to the el-form-item.</p>
  
  <p>The data model looks something like this.</p>
  
  <pre><code>form: {
      invoices: [
          {
              amount: '',
              items: [{ name: '', value: '' }]
          }
      ]
  }
  </code></pre>
  
  <p>In the html part I have something like this:</p>
  
  <pre><code>&lt;template v-for="(invoice, index) in form.invoices"&gt;
      &lt;el-form-item :prop="`invoices.${index}.amount`" :rules="rules.invoiceAmount"&gt;
          &lt;el-input/&gt;
      &lt;/el-form-item&gt;
      &lt;el-table :data="invoice.items"&gt;
          &lt;el-table-column prop="name"&gt;
              &lt;template scope="scope" slot-scope="scope"&gt;
                  &lt;el-form-item :prop="`invoices.${index}.items.${scope.$index}.name`" :rules="rules.items"&gt;
                      &lt;el-input/&gt;
                  &lt;/el-form-item&gt;
              &lt;/template&gt;
          &lt;/el-table-column&gt;
      &lt;/el-table&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>The second <code>&lt;el-form-item&gt;</code> is not validated due to an error </p>
  
  <blockquote>
    <p>"Error: please transfer a valid prop path to form item!"</p>
  </blockquote>
  
  <p>I also tried passing as a prop the following</p>
  
  <pre><code>items.${scope.$index}.name
  </code></pre>
  
  <p>but that didn't work either. Any thoughts?</p>