vue-image-select

Step 1: Install

yarn add vue-image-select

or

npm install vue-image-select --save

Step 2: Config @ Laravel_Project/resources/assets/js/app.js

window.Vue = require('vue');
require('vue-image-select');

or

Vue.use(require('vue-image-select'));

Step 3: Template

<button class="btn btn-primary" @click="addPhotos">Save</button>
<vue-image-select :images="dataImages" v-model="updatingPhotos"></vue-image-select>

Step 4: Data

data() {
    return {
        updatingPhotos: [],
        // Init Selected, invalid id will be ignored
        // updatingPhotos: [3, 11],
        dataImages: []
    }
}

Step 5: dataImages Load Sample

loadPhotos: function() {
    let self = this;
    self.instance
        .get('/api/photos/')
        .then(function(response) {
            // id is required
            // [{"id" => 1, "url" => "a.jpg"}, {"id" => 2, "url" => "b.jpg"}]
            self.dataImages = response.data.data
        })
},

Step 6: Sample for action after multi-selecting images

addPhotos: function(id) {
    let self = this

    var formData = new FormData();
    formData.set('_method', "PUT");
    formData.set("photo_ids", self.updatingPhoto.join(','));

    axios.post("/api/products/" + id, formData)
        .then(function (response) {
            // TODO: succeed
        }).catch(function (error) {
            // TODO: error
        }).then(function() {
            self.updatingPhotos = []
        });
},

Data Props

Name | Sample | Description ---- | ------ | ----------- :images | dataImages | array for images viewed in the component v-modal | updatingPhotos | array for fetch selected images(get), or init selected photos, ignore invalid id(set)

References

• vue-image-select @ GitHub
• vue-image-select @ npm