add 'selected' attribute to 'options' in multi-select based on session data

Level 2

This is my javascript - getting data for 3 drop-downs which are report selection criteria: report name, payers, patients. The latter 2 dynamically generated from ajax calls to their db tables.

var reports = new Vue({

el: '#reports',

data: {
    selected: '0',
    options: [
        { text: '-- Choose Report --', value: 0},
        { text: 'Insurance', value: 1 },
        { text: 'Charge By Client', value: 2}
    ],
    payer: '',
    patient: '',
},

computed: {
    errors: function() {
        if (this.selected == 0) {
            return true;
        }

        return false;
    }
    
},

ready: function() {
    this.fetchPayers();
    this.fetchPatients();
},

methods: {
    fetchPayers: function() {
        this.$http.get('/reports/payer_ajax_list', function(payer) {
            this.$set('payer', payer);
        });
    },

    fetchPatients: function() {
        this.$http.get('/reports/patient_ajax_list', function(patient) {
            this.$set('patient', patient);
        });
    }
}

});

HERE is a partial of my view code. For each of the drop-downs, I want whatever was selected in each drop down to show as selected again after the submit returns them to the page. The form submits to 'do_report', where I grab some data from the database, and then return to the same (index) view where I show this partial view, and below it, I show the results of the query from the selection criteria submitted. I was thinking I'd store the selections (in the controller I submit to) into session variables. Therefore, with this strategy, I need to say something like the following for each drop-down 'option': if option.value is in session-array, add attribute 'selected' to that 'option' : NOTE: my firs 2 lines, a <div and my form tag, are getting munged... I capitalized FORM so you'd see it... so ignore the bad syntax there please:

FORM method="POST" action="/reports/do_report" class="form" id="reports-form" {!! csrf_field() !!}

    <div class="page-header">
        <h4 class="page-title">Select Report:</h4>
        <select name="report_select" v-model="selected" class="form-control">
            <option v-repeat="option: options" value="@{{ option.value }}">
                @{{option.text}}
            </option>
        </select>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                Start Date
                <input type="date" name="startdate" id="startdate" class="form-control">
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                End Date
                <input type="date" name="enddate" id="enddate" class="form-control">
            </div>
        </div>
    </div>

    <div class="row" id="payers">
        <div class="col-md-6">
            <div class="form-group">
                Payer
                <select name="payer_select[]" v-model="payers" class="form-control" multiple>
                    <option v-repeat="option: payer" value="@{{ option.payer_name }}">
                        @{{option.payer_name}}
                    </option>
                </select>
            </div>
        </div>
        <div class="col-md-6">
            <span class="show" v-if="selected == 2">
                <div id="patient_div" class="form-group">
                    Patient
                    <select name="patient_select[]" v-model="patients" class="form-control" multiple>
                        <option v-repeat="option: patient" value="@{{ option.patient_full_name }}">
                            @{{option.patient_full_name}}
                        </option>
                    </select>
                </div>
            </span>
        </div>
    </div><!-- /.row -->

    <br>
    <div class="row">
        <div class="col-sm-12">
            <div class="btn-group">
                <button type="submit" class="btn btn-default" id="btn-submit" v-attr="disabled: errors">Search</button>
                <a href="/reports" class="btn btn-default">Cancel</a>
            </div>
        </div>
    </div>


</form>