0

I have list of inputs and labels that are generated with a v-for. when i flight tested this with ONE item, it worked. when i expanded it for dynamicism, it broke all to !@#$. please point out my error.

here's my HTML:

<div v-for="(dRow, dIndex) in modalRows">
  <section v-if="!dRow.isComplete">
    <label :for="('proof' + dIndex)"><b>PROOF</b> (pdf, jpg, png):
      <input type="file" :id="('proof' + dIndex)" ref="file" 
             @change="handleFileUpload(this.('proof' + dIndex))" />
    </label>
    <i class="las la-upload uploader" 
       @click.prevent="uploadProof(('proof' + dIndex).file, dRow)"></i>
  </section>
</div>

and here's my Vue methods: (literally just checking if anything made it through)

handleFileUpload(file){ console.log(file); }
uploadProof(file,dRow){ console.log(file); console.log(dRow); }

it used to output the files array when i had only one item manually id'd and labelled. now that i've altered it to allow for array-driven lists of inputs, it just reports:

invalid expression: missing name after . operator in handleFileUpload(this.('proof' + dIndex))

i'm at a loss. where's my mistake and what the !@#$ does that error mean???

Phil
  • 157,677
  • 23
  • 242
  • 245
WhiteRau
  • 818
  • 14
  • 32
  • I think you want `this['proof' + dIndex]` – Phil Jun 05 '20 at 01:12
  • Does this answer your question? [Dynamically access object property using variable](https://stackoverflow.com/questions/4244896/dynamically-access-object-property-using-variable) – Phil Jun 05 '20 at 01:14
  • If I'm reading your code right, rather than have a bunch of properties like `proof0`, `proof1`, etc you should really have an array, ie `proof: []`. It would make accessing each element much easier – Phil Jun 05 '20 at 01:17
  • FFS. i keep forgetting that `this` now refers to `Window`, not the element that calls the method. @Phil you are correct. that did it. thank you. i'm going to tattoo this on the back of my hands.... >:( – WhiteRau Jun 05 '20 at 01:19
  • In Vue, `this` typically refers to your component, not `window`. Your issue was a basic JavaScript syntax error. Nothing to do with Vue – Phil Jun 05 '20 at 01:19
  • the reason i don't use an array, is that these can be triggered non-sequentially and it saves my having to figure out which place in the array their file is. sometimes, nothing will be selected/uploaded, but other portions of the list will. to my mind, it seemed an easier solve than an array (which i did consider) for pure simplicity in this context. i am, however, happy to be wrong and learn a better way though. – WhiteRau Jun 05 '20 at 01:21

0 Answers0