Updating a single item in a Javascript (Vue.js) object within a list array

Question

I have a list of gallery images and I want to be able to select an image to make it preview: true By default, there always has to be a preview image. What I am trying to is

Click the image
Remove the preview on all images
Make the clicked image a preview
Update API

This is the code I'm trying to get to work:

export default {
    props: ['images'],
    methods: {
        makePreview (image, index) {

            // Loop through images and remove preview
            this.images.map((image, index) => {
                image.preview = false
            })

            // Set clicked image to preview
            image.preview = true

            // Update API
            this.updateImages()
        }
    }
}

When I console.log(image) in the method, I do get the correct image object to update, but this is not updating the images prop.

EDIT:

Image object:

{
    alt: "New venue"
    id: 111
    large: "https://radnomcdn.com/large.jpg"
    order: 2
    preview: false
    thumb: "https://radnomcdn.com/thumb.jpg"
}

What does the images property contain? The exact structure? — Bert
– Bert, Commented Jun 25, 2017 at 16:48
I need the preview to be true on the one selected while turning the other off. — Jack Barham
– Jack Barham, Commented Jun 25, 2017 at 16:53

Bert · Accepted Answer · 2017-06-25 17:16:17Z

1

I'm not sure what we are missing here in your question, this code seems to work. The only main difference I see is I commented out the updateImages method.

Technically, this is a situation where you are mutating a property, which is generally frowned upon. The intention is that properties are passed down and changes to those properties are emitted as events back to the parent. However, objects and arrays can be mutated.

const images = [{
    alt: "New venue",
    id: 111,
    large: "https://radnomcdn.com/large.jpg",
    order: 2,
    preview: false,
    thumb: "https://radnomcdn.com/thumb.jpg"
  },
  {
    alt: "New venue",
    id: 222,
    large: "https://radnomcdn.com/large.jpg",
    order: 3,
    preview: false,
    thumb: "https://radnomcdn.com/thumb.jpg"
  },
  {
    alt: "New venue",
    id: 333,
    large: "https://radnomcdn.com/large.jpg",
    order: 4,
    preview: false,
    thumb: "https://radnomcdn.com/thumb.jpg"
  }

]

Vue.component("display-images", {
  template:`
    <div>
      <div v-for="image, index in images">
        {{image.preview}}
        <button @click="makePreview(image, index)">Preview</button>  
      </div>
    </div>
  `,
  props: ['images'],
  methods: {
    makePreview(image, index) {

      // Loop through images and remove preview
      this.images.map((image, index) => {
        image.preview = false
      })

      // Set clicked image to preview
      image.preview = true

      // Update API
      //this.updateImages()
    }
  },
  mounted(){
    this.makePreview(this.images[0])
  }
})

new Vue({
 el: "#app",
 data:{
   images
 }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="app">
  <display-images :images="images"></display-images>
  <div style="margin-top:5em">{{images}}</div>
</div>

edited Jun 25, 2017 at 17:16

answered Jun 25, 2017 at 17:10

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

7 Comments

Jack Barham Over a year ago

Thanks. I can see yours is working, which I why I'm getting confused on mine. Unless it's because I need to update it as an event. Let me try that.

Jack Barham Over a year ago

It's an API call to update the list that I have commented out until I can update the property first.

Bert Over a year ago

If you want to share the code in a gist or pastebin or something I'll see if I can see the issue.

Jack Barham Over a year ago

Sure gist.github.com/jackbarham/0ab318fd35499dd4366cb3194421fcfc

Jack Barham Over a year ago

Everything else works (drag drop, deleting, etc) execpt that

|

Collectives™ on Stack Overflow

Updating a single item in a Javascript (Vue.js) object within a list array

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related