why v-for on array of objects within an object, doesn't update even with :key?

Question

I'm iterating through an array within an object. When I update an object in the array, the data updates, but, the UI doesn't

Data looks like this

projectConfig = {
   files: [
      lang: "ar-eg",
      paths: ["/Users/omarabdelhady/Desktop/Others/test/i18n/ar-eg.json"]
   ]
}

HTML

 <div class="col-12 files-box">
    <div v-for="(file, index) in projectConfig.files" :key="file.lang">
        <bdi>Lang : {{file.lang}}</bdi>
         <div>
           Files :
             <ul class="col-12 app-list">
                <li v-for="(path, i) in file.paths" :key="path">
                   {{getFileNameFromPath(path)}}
                      <i class="i-bin"
                         @click="deleteLang(i, index)">
                      </i>
                </li>
             </ul>
          </div>
       </div>
   </div>

delete method

  deleteLang(pathIndex, fileIndex) {
    this.projectConfig.files[fileIndex].paths.splice(pathIndex, 1);
     if(this.projectConfig.files[fileIndex].paths.length === 0) {
       this.projectConfig.files.splice(fileIndex, 1);
     }
   }

I use the :key for v-for to detect changes, didn't work I tried this.$forceUpdate(), worked, but I think it is not the best solution

-- update actually the data looks like this

projectConfig = {
   files: [{
      lang: "ar-eg",
      paths: ["/Users/omarabdelhady/Desktop/Others/test/i18n/ar-eg.json"]
   }]
}

plus I'm using typescript

The only problem I see is that you forgot to encapsulate the element in files as an object. I tried your code in a fiddle (with the fix) and it worked just fine. Check it out: jsfiddle.net/9dxeh671 — Ayrton
– Ayrton, Commented Nov 26, 2019 at 19:00
can you please point out to the change, I don't see what did you do? — Omar Abdelhady
– Omar Abdelhady, Commented Nov 26, 2019 at 19:17
I simply encapsulated your files with object notation like this: files: [{ lang: "ar-eg", paths: ["/Users/omarabdelhady/Desktop/Others/test/i18n/ar-eg.json"] }] — Ayrton
– Ayrton, Commented Nov 26, 2019 at 19:19
that's already how my data looks like I will update it, but still doesn't work, I will also make it clear that I'm using typescript — Omar Abdelhady
– Omar Abdelhady, Commented Nov 26, 2019 at 19:22
I agree with @Ayrton. The code works for me too. Maybe you should share a JSFiddle, so that we can check what's wrong with your code. — Ankit Kante
– Ankit Kante, Commented Nov 26, 2019 at 19:23

Daniel · Accepted Answer · 2019-11-26 20:02:27Z

1

I'm guessing that the problem is that the reactivity is not setup on component initialization. Either the data is not available initially, or there are too many nested objects and arrays.

looking at this nested object...
projectConfig.files[i].paths[j]

that is a string in an array in an object in an array in an object.

if the array is empty when the component is initiated, the reactivity is not added. You can try using slice and $set to trigger the reactivity.

answered Nov 26, 2019 at 20:02

Daniel

35.9k17 gold badges115 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Omar Abdelhady Over a year ago

Yes, that's correct the data was not initially there, did not know that the data has to be initialized so i had to construct the data with initial values in all levels for it to work,

Omar Abdelhady Over a year ago

constructor() { this.projectName = ''; this.projectDir = ''; this.files = [ {lang: '', paths: []} ] } this is what I did, you may update your answer rather than putting it in the question itself

Collectives™ on Stack Overflow

why v-for on array of objects within an object, doesn't update even with :key?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related