Remove item from array (Vue 2)

How do you get $images into your component?

@zachleigh Its a Php array from Laravel :)

But how are you accepting it in Vue? I had the same problem and it was due to Vue 2.0 not making props reactive by default. You have to create data properties for them. See here: http://forum.vuejs.org/t/observer-not-being-set-on-component-property/1528

@zachleigh

I am doing it exactly like your setup, now I also tried setting my images array as a data instead, but it still does not visually remove the item from the list, here is a bit more code:

    <image-gallery :images="{{ $images }}"></image-gallery>

   export default {
        store: ['auth'],

        props: {
            images: Array
        },

        data: function() {
            return {
                imageList: this.images
            }
        },

        methods: { 
            deleteImage: function(index, image) {
                var accepted = confirm('Do you really want to delete the image?');

                if(accepted) {
                    var form = new FormData();

                    form.append('imageId',image.id);
                    form.append('path', image.path);

                    this.$http.post('/delete-image', form).then(function(response) {
                        this.imageList.splice(index, 1);
                    });
                }
            }
        }
    }

This is never going to work...

<image-gallery :images="{{ $images }}"></image-gallery>

You will either have to encode that array as json, and then parse that json within your vue component, or you might be able to get away with something like:

<image-gallery :images="{{ '[' . implode(',', $images) . ']' }}"></image-gallery>

Hi @willvincent

Not working as in not being rendered? Or not working as in vue not being able to work with it as a data property?

I am currently returning it as JSON from my controller, and the list is rendering

What does your template look like?

You could also try the $set method which will put an observer on it.

this.$set(this, 'imageList', this.images);

@Reached have you ever done something like this:

$foo = ['foo', 'bar', 'baz'];

print "blah blah " . $foo . " blah.";

Because that's pretty much what you're trying to do in your template... that'll never work, you can't print an array like that.

Use filter instead of splice, it will replace the array and trigger an update:

this.images = this.images.filter(function (item) {
    return image.id != item.id;
});

@danielboendergaard

Thank you, that works! :)

@willvincent

You write that this is never going to work, although it does? I am returning JSON from my controller directly to the view.. Otherwise I dont understand your post :)

@zachleigh

Using the filter method it worked, but I haven't tried with $set but will definitely keep it in mind for next time I need to make an observable! Thanks for helping now and before :)

@Reached well see, you didn't show the controller, how would anyone know you were injecting json into the view from your controller? :)

@willvincent

Sorry for forgetting that pretty important detail :D! And thanks for helping :)

For the life of me I can't figure this out. Might be one of those situations where I post it out into the universe and five minutes later I realize what's going on but it's Friday, and I want to be done for the week.

Adding tags to my collection works great. My removeTag action is firing and in the console I can see the tag is removed from the collection however my DOM is never refreshed. First foray into Vue so I'm probably doing something wrong. This is Vue 2.x.

import datepicker from './DatePicker.vue';

    export default {
        props: [
            'list'
        ],

        data: function() {
            return {
                tagList: this.list
            }
        },

        components: {
            datepicker
        },

        computed: {
            moreThanOne: function() {
                return this.tagList.length > 1;
            }
        },

        methods: {

            removeTag: function(tag) {
                if (this.moreThanOne) {
                    this.$set(this, 'tagList', this.tagList.filter(function(item) { return item != tag; }));
                    console.log(this.tagList);
                }
            },

            addTag: function(tag) {
                this.tagList.unshift({
                    rfid: null,
                    lot: tag.lot,
                    expiration_date: tag.expiration_date
                });
            },

        }
    }

Hi @itguy614,

Did you manage to solve the issue?

This triggered the update for me (because it replaces the array), thanks again @danielboendergaard:

this.images = this.images.filter(function (item) {
    return image.id != item.id;
});

@Reached Nope, can't figure it out. This is my method right now.

            removeTag: function(tag) {
                if (this.moreThanOne) {
                    this.tagList = this.tagList.filter(function(item) { return item != tag; });
                    console.log(this.tagList);
                }
            },

In the console, I can see the array being updated the way it should however there are no updates in the DOM.

Hey there,

I know this is an old thread but I did this in a completely different way and I think it might be a better way, if I am wrong I will of course be very happy to learn the error of my ways ;)

So, if you have a list of objects, in my case it is projects (original I know) and you want to delete one and update the list of projects I found it was much easier and more reliable to simply refresh the list by adding a Listener and emitting a Broadcast message. Here are a few code snippets.

Declare your data:

    data() {
        return {
            projects: [],
        };
    },

Get the projects and populate the projects variable:

    methods: {
        getProjects() {
            axios.get('/api/projects')
                .then(response => {
                    this.projects = response.data;
                });
        },
    }

On delete emit an update request:

deleteProject() {
            axios.delete('/api/project/' + this.deletingProject.id, this.deleteProjectForm)
                .then(() => {
                    Bus.$emit('updateProjects');
                    $('#modal-delete-project').modal('hide');
                });
        },

and in created:

        Bus.$on('updateProjects', function () {
            self.getProjects();
        });

Depending on how you have your components set up the emit/on part may not even be necessary, you may just be able to call the get method directly.

Anyway, the point is I didn't have to remove anything from the array, I just recalled the get method - works a treat!

Hope this helps!