Friday, March 10, 2017

How to pass value to vuemultiselect from the database on edit

I have a laravel form and am using vue multiselect to select multiple users. I then save those users in my database. On edit, I can fetch the users but I dont know how to append them.

{!! Form::open(['route' => 'store', 'files'=>true]) !!}
.....
<drop-down
        :options="options"
        :selected.sync="selected"
        :show-label="true"
        ></drop-down>
.....


The component looks like this:

<template>
    <div>
        <div>
            <label class="typo__label">Select Users to be notified</label>
                <multiselect v-model="value" :options="options" :multiple="true" :close-on-select="false"
                             :clear-on-select="true" :hide-selected="true"
                             placeholder="Select User" label="name"
                             track-by="name"></multiselect>
        </div>

        <div v-if="value">
                <input id="user_group" v-model="value" name="user_group" type="hidden">
        </div>
    </div>
</template>

<script>
   import Multiselect  from 'vue-multiselect'

   export default {
        components: {Multiselect},
        data: function () {
            return {
               value: [],
               options: []
                }
            },
        methods: {
            getUsers: function () {
                this.$http.get('/api/get/users').then(function (response) {
                    this.options = response.data;
                }, function (response) {
                    console.log(response)
                });
            }
        },
        created: function () {
            this.getUsers();
        }
    };
</script>

What I would like is to be able to see the users I have passed from the backend to be shown when I load the edit form like this: Also how to show the selected users in case there is a validation error that redirects back with input when creating.

enter image description here



via Phillis Peters

Advertisement