title: vuejs return data to nested variable
body: <p>I have nested form which works fine, but since i've added upload file to it, it can't get image name.</p>
  
  <h1>Logic</h1>
  
  <ol>
  <li>I add option with type (e.g. <code>type = checkbox, name = test</code>)</li>
  <li>Then I add multiple options for it (e.g. <code>name = option1, photo =
  abc.jpg</code> and <code>name = option2, photo = def.png</code>)</li>
  </ol>
  
  <p><strong>Now, without photo part all is good.</strong> but when i added photo part to children it has 2 issues:</p>
  
  <ol>
  <li>Photo name can't be return in that array</li>
  <li>Photo for all options will be set to latest selected image
  (screenshot below)</li>
  </ol>
  
  <h3>Screenshot</h3>
  
  <p><a href="https://i.stack.imgur.com/kjUrM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kjUrM.png" alt="one"></a></p>
  
  <h1>Code</h1>
  
  <p><code>HTML</code></p>
  
  <pre><code>&lt;el-form-item label="Option Name"&gt;
      &lt;el-col :span="10" style="margin-top:15px;"&gt;
          &lt;!-- parent --&gt;
          &lt;div v-for="(index, a) in optionParents" :key="a"&gt;
          &lt;el-input placeholder="Please input your variation name" v-model="index.name" class="input-with-select"&gt;
              &lt;el-select @change="optionType" v-model="index.type" slot="prepend" placeholder="Select"&gt;
                  &lt;el-option label="Drop-down" value="dropdown"&gt;&lt;/el-option&gt;
                  &lt;el-option label="Checkbox" value="checkbox"&gt;&lt;/el-option&gt;
                  &lt;el-option label="Radio Button" value="radio"&gt;&lt;/el-option&gt;
              &lt;/el-select&gt;
          &lt;/el-input&gt;
          &lt;/div&gt;
  
      &lt;/el-col&gt;
  
      &lt;!-- Children --&gt;
      &lt;el-col class="line text-center" :span="3"&gt;Option Value(s)&lt;/el-col&gt;
      &lt;el-col :span="11" style="margin-top:15px;"&gt;
  
          &lt;div v-if="selecteOption == 'dropdown'"&gt;
              &lt;div v-for="(indexx, b) in optionChilds" :key="b"&gt;
                  &lt;!-- child's --&gt;
                  &lt;el-input v-model="indexx.name" placeholder="Please input your option value" class="input-with-select"&gt;
                      &lt;el-button slot="append"  @click="addOptionChild(b)"  type="success" icon="el-icon-plus"&gt;&lt;/el-button&gt;
                      &lt;el-button slot="append" @click="removeOptionChild(b)" v-show="b || ( !b == optionChilds.lenghth &gt; 1)" type="danger" icon="el-icon-delete"&gt;&lt;/el-button&gt;
                  &lt;/el-input&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div v-if="selecteOption == 'checkbox'"&gt;
              &lt;div v-for="(indexx, b) in optionChilds" :key="b"&gt;
                  &lt;el-input v-model="indexx.name" :rows="3" placeholder="Please input your option value" class="input-with-select"&gt;
                  &lt;/el-input&gt;
                  &lt;!-- upload image --&gt;
                  &lt;el-upload
                      class="upload-demo"
                      action="/api/upload/single"
                      :on-change="handleChange"
                      v-model="indexx.photo"  // as you can see my v-model here is same as my input just is set to photo value
                      :limit="1"
                      :multiple="false"
                      :file-list="fileList"
                      :on-exceed="handleExceed"
                      :on-remove="handleRemove"
                      :on-preview="handlePictureCardPreview"
                      :on-success="handleOptionSuccess"
                      :before-remove="beforeRemove"
                      :auto-upload="true"&gt;
                      &lt;el-button size="small" type="primary"&gt;Click to upload&lt;/el-button&gt;
                      &lt;div slot="tip" class="el-upload__tip"&gt;jpg/png files with a size less than 500kb&lt;/div&gt;
                  &lt;/el-upload&gt;
                  &lt;!-- upload image --&gt;
                  &lt;el-button-group&gt;
                      &lt;el-button size="small" @click="addOptionChild(b)"  type="success" icon="el-icon-plus"&gt;&lt;/el-button&gt;
                      &lt;el-button size="small" @click="removeOptionChild(b)" v-show="b || ( !b == optionChilds.lenghth &gt; 1)" type="danger" icon="el-icon-delete"&gt;&lt;/el-button&gt;
                  &lt;/el-button-group&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div v-if="selecteOption == 'radio'"&gt;
              &lt;div v-for="(indexx, b) in optionChilds" :key="b"&gt;
                  &lt;!-- child's --&gt;
                  &lt;el-input v-model="indexx.name" :rows="3" placeholder="Please input your option value" class="input-with-select"&gt;
                  &lt;/el-input&gt;
                  &lt;!-- upload image --&gt;
                  &lt;el-upload
                      class="upload-demo"
                      action="/api/upload/single"
                      :on-change="handleChange"
                      v-model="indexx.photo" // as you can see my v-model here is same as my input just is set to photo value
                      :limit="1"
                      :multiple="false"
                      :file-list="fileList"
                      :on-exceed="handleExceed"
                      :on-remove="handleRemove"
                      :on-preview="handlePictureCardPreview"
                      :on-success="handleOptionSuccess"
                      :before-remove="beforeRemove"
                      :auto-upload="true"&gt;
                      &lt;el-button size="small" type="primary"&gt;Click to upload&lt;/el-button&gt;
                      &lt;div slot="tip" class="el-upload__tip"&gt;jpg/png files with a size less than 500kb&lt;/div&gt;
                  &lt;/el-upload&gt;
                  &lt;!-- upload image --&gt;
                  &lt;el-button-group&gt;
                      &lt;el-button size="small" @click="addOptionChild(b)"  type="success" icon="el-icon-plus"&gt;&lt;/el-button&gt;
                      &lt;el-button size="small" @click="removeOptionChild(b)" v-show="b || ( !b == optionChilds.lenghth &gt; 1)" type="danger" icon="el-icon-delete"&gt;&lt;/el-button&gt;
                  &lt;/el-button-group&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/el-col&gt;
      &lt;el-col :span="24" style="margin-top:15px;"&gt;
          &lt;el-button type="primary" @click="addOptions" native-type="submit"&gt;Save Options&lt;/el-button&gt;
      &lt;/el-col&gt;
  &lt;/el-form-item&gt;
  </code></pre>
  
  <p><code>Script</code></p>
  
  <blockquote>
    <p>Note: I have removed everything else that wasn't related to this
    options, all you see in code below is related to options
    functionality.</p>
  </blockquote>
  
  <pre><code>export default {
      data() {
          return {
              fileList: [],
              selecteOption: '',
              savedOptions: [],
              optionParents: [
                  {
                      name: '',
                      type: ''
                  }
              ],
              optionChilds: [
                  {
                      name: '',
                      photo: '',
                  }
              ],
              form: {
                  name: '',
                  slug: '',
                  price: '',
                  new_price: '',
                  sku: '',
                  qty: 1,
                  active: '',
                  photo: '',
                  shortDesc: '',
                  longDesc: '',
                  tags: [],
                  brand_id: '',
                  categories: [],
                  user_id: '',
                  seoTitle: '',
                  seoTags: '',
                  seoPhoto: '',
                  seoDescription: '',
                  variations: [],
                  options: [],
                  condition: '',
                  isbn: '',
                  ean: '',
                  upc: '',
              },
          }
      },
      methods: {
          addOptionChild(index){
              this.optionChilds.push({name: '', photo: ''});
          },
          removeOptionChild(index){
              this.optionChilds.splice(index, 1);
          },
          optionType: function(value) {
              this.selecteOption = value
          },
          addOptions(e) {
              e.preventDefault();
              axios.post('/api/admin/options/store', {
                  childs: this.optionChilds,
                  parent: this.optionParents,
              })
              .then(res =&gt; {
                  this.optionChilds = [
                      {
                          name: '',
                          photo: ''
                      }
                  ],
                  this.optionParents = [
                      {
                          name: '',
                          type: ''
                      }
                  ],
                  this.savedOptions.push(res.data.data);
                  this.form.options.push(res.data.data.id);
              })
              .catch(error =&gt; {
                  var errors = error.response.data;
                      let errorsHtml = '&lt;ol&gt;';
                      $.each(errors.errors,function (k,v) {
                              errorsHtml += '&lt;li&gt;'+ v + '&lt;/li&gt;';
                      });
                      errorsHtml += '&lt;/ol&gt;';
  
                  this.$notify.error({
                      title: 'Error',
                      dangerouslyUseHTMLString: true,
                      message: errorsHtml
                  });
              })
          },
          handleOptionSuccess(res, file) {
              this.optionChilds.photo = res.data;  // this s supposed to set uploaded image name in options `photo: ''`
          },
          handleChange(file, fileList) {
              this.fileList = fileList.slice(-3);
          },
          handlePictureCardPreview(file) {
              this.dialogImageUrl = file.url;
              this.dialogVisible = true;
          },
          handleExceed(files, fileList) {
              this.$message.warning(`The limit is 1, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally, remove old image and try again.`);
          },
          beforeRemove(file) {
              return this.$confirm(`Cancel the transfert of ${ file.name } ?`);
          },
      },
  
  }
  </code></pre>
  
  <h3>Sending data</h3>
  
  <p>This is what is sending to back-end when i hit save button</p>
  
  <p><a href="https://i.stack.imgur.com/ijO8I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ijO8I.png" alt="two"></a></p>
  
  <h1>Question</h1>
  
  <ol>
  <li>How can I update <code>photo: ''</code> data with uploaded image?</li>
  <li>How to fix images of getting same file for all options?</li>
  </ol>