How to pass an array of options from php to vue.js selction dropdown form?

Hi @zhiyong

Its looks like you are filling an option. I use pure PHP on backend to send JSON objects to Vue front end. Here is the Javascript function to receive the Ajax response.

function indexPayload($p) {
    //fyi("Index Payload...");
    for (var i = 0; i < $p[$p.rootName].Category.length; i++)   {
        app.addOption(
            new Option(
                $p[$p.rootName].Category[i].Desc,
                $p[$p.rootName].Category[i].Id));
    }
    controlButtons();
}

Here is the blade file that is setup for Vue

@extends('coverage::layouts.coverage_category')
    @section('cat-content')
    <div id="app-container">
        <h2>Coverage Categories Mods</h2>
        <form name="form1" action="">
                <div id="select">
                    <select v-model="selected" v-on="change: onListSelect"
                            options="selectOptions"
                            id="list_box" size="10">
                    </select>
                </div>
            <div id="input-area">
                <div id="short-name">
                    Short Name:
                    <input v-model="shortName" v-on="change: textChange" lazy
                           type="text" id="shortName" class="req"  maxlength="8" size="10">
                </div>
                <div id="long-name">
                    Long Name:
                    <input v-model="longName" v-on="change: textChange" lazy
                           type="text" id="longName" class="req" size="32" maxlength="30">
                </div>
                <div id="btns">
                    <button v-on="click: execCommand" class="btn" id="save">Save</button>
                    <button v-on="click: execClear" class="btn" id="clear">Clear</button>
               </div>
            </div>
        </form>
        <p>Short name: <strong>@{{shortName}}</strong></p>
        <p>Long name: <strong>@{{longName}}</strong></p>
        <p>Selected: <strong>@{{selected}}</strong></p>
    </div>
    @stop

Here is the JSON Data that is sent.

{
    
"type":  0,
    
"status":  0,
    
"cmd":  "Find",
    
"rootName":  "CoverageCategories",
    

    "CoverageCategories":  
{
        
"System":  [
"Test",
        
"Test1",
        
"Test2"],
        
"IdNum":  999,
        

    "Category":  
    [

{
            
"Id":  1,
            
"Desc":  "PRIMARY COVERAGE"
        },
        

{
            
"Id":  2,
            
"Desc":  "BACKUP COVERAGE"
        },
        

{
            
"Id":  3,
            
"Desc":  "PRIMARY & ACCOUNT MANAGER"
        },
        

{
            
"Id":  4,
            
"Desc":  "VIEW ONLY"
        },
        

{
            
"Id":  5,
            
"Desc":  "BACKUP & ACCOUNT MANAGER."
        

        }

    ]
    }
}

Here is the method defined in the Vue object to add data,

            addOption: function (opt) {
                this.selectOptions.push(opt);
            },

And Option object.

function Option(t, v) {
    this.text =  t;
    this.value = v;
};

@zhiyong Opps,

Forgot data def in Vue object

    app = app = new Vue({
        el: '#app-container',

        data: {
            shortName: "",
            longName: "",
            //selectOptions: [new Option("1", 1), new Option("2", 2)],
            selectOptions: [],
            selected: -1,
        },
        methods: {
...

@jimmck Thanks for posting your code. I will try to understand it.

I am also experimenting this:

<select class="form-control" v-model="user.title">
       <option v-repeat="title in list_of_titles">
                      @{{title}}
       </option>
</select>

I was able to populate the option list but could not check certain option based on the starting value of user.title passed from backend. Did you solve this?

Hi @zhiyong Straight JQuery will work.

Also how are sending data from backend? I send text and then on Javascript side a generic JS class does data handling:

    try {
        this.payLoad = JSON.parse(data);   // as opposed to jQuery.ParseJSON...???  Works
    } catch (e) {
        fyi("exception " + e);
        this.payLoad = "";
        this.onDef.call(window, "Server Data Error: " + e);
        return;
    }

Note Laravel seems to have JSON response capability. I ported from custom PHP backend to Laravel.

I use something like this:

return response()->json(compact('titles'));

This is quite straightforward and works well. I just need a way to check the option based on starting value of another variable. I will try JQuery.