question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

image not update while loop re-render

See original GitHub issue

hi ! i have problem image not update while i remove item.data re-render is okay but image isn’t render at all.if you have solution that would be big help for most user.Please check my code

<div v-if="items.length > 0" class="sticky-container bg-shade pb-3" :class="{'show': triggerCompare}">
        <label class="bg-default txt-white" @click="triggerCompare = !triggerCompare">COMPARE</label>
        <div class="list-container container-fluid py-3">
            <div v-for="(item,index) in items" :key="index" class="item mb-3">
                <img v-if="item.photo" :src="domainPhotoName+pathImageName+item.photo"/>
                <img v-else src="http://localhost:8081/static/images/image_unavailable.png"/>
                <i class="fas fa-times" @click="items.splice(index,1)"></i>
                <div class="des txt-white p-2" :class="{'bg-default-glass':(item.type == 'Rent'),'bg-buy-glass':(item.type == 'Buy')}">
                    <h5>{{ item.title }}</h5>
                    <strong>{{ item.price }}</strong>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-6"><button class="flat-button bg-second txt-white mt-0" v-if="listItem.length >= 2" @click="checkCompare">Compare</button></div>
                <div class="col-6"><button class="flat-button bg-rb txt-white mt-0" @click="$emit('update:items', [])">Clear</button></div>
            </div>    
        </div>
    </div>

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:8
  • Comments:11

github_iconTop GitHub Comments

14reactions
rpahlevycommented, Oct 16, 2018

using unique :key solved my problem… note. don’t use index as key

3reactions
lilywang711commented, Sep 28, 2018

#273 加一个key 就解决了

Read more comments on GitHub >

github_iconTop Results From Across the Web

Reload image on loop (JavaScript / HTML) - Stack Overflow
Image still doesn't update. I'm referencing a local file, would that have something to do with it? · Has been local file really...
Read more >
When does React re-render components? - Felix Gerschau
React is known for providing a fast user experience by only updating the parts of the UI that have changed. When looking into...
Read more >
Using React's useEffect Hook to Fetch Data and Periodically ...
Use useEffect to fetch data in a functional component and use setInterval to refresh that data as desired. What We Will Learn; UseEffect ......
Read more >
How to update a plot on same figure during the loop?
Without using figure.ion() we may not be able to see the GUI plot. Example 1: In the given example firstly we are importing...
Read more >
5 Ways to Avoid React Component Re-Renderings
So, it will not re-render the component if the user clicks the same item again ... to prevent unnecessary re-rendering while reducing the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found