Display Object list from server in a Select option in Vue

2
votes

I receive a list of Grades that are in the right format ( $key => $value) in a $grades variable

How can I fill a select option input with Vue using this variable.

I guess I must bind the vue variable with : but I'm just beginning with vue and I can find so very little basic examples, 

<select v-model="grades" class="form-control">
       <option v-for="gradeValue in gradeValues" :gradeValues="{{ $grades /* Laravel Variable */ }}">@{{ gradeValue }}</option>
</select>

EDIT: I could make an ajax call from Vue, this should not be so complicated, but as the page load, my Laravel controller passes variables to my View, so, this is for me a cleaner aproach, in this case there is no need for ajax.

2
laravelvue.js
you should set the variables that come from the server in a vue hook like ready or created – Yerko Palma
thing is I can't use laravel variables outside of blade files (.blade.php). that's my problem. So, my problem is how to asign a variable inside the html, and then get the variable in vue – Juliatzin

2 Answers

2
votes

I think this has been over complicated for you, your code in this question looks close. Is your Vue component in the same file as your blade? Then it's just:

html

<select v-model="selectedGrade" class="form-control">
   <option v-for="(grade, val) in grades" :value="val">@{{ grade }}</option>
</select>

js:

new Vue({
  ...
  data:function(){
    return { 
      grades:{{ $grades }},
      selectedGrade:2 //some default value
    }
  }
  ...
});

If your component is in a separate file you still don't need a separate component for each select dropdown, you just need to pass all the required info into one component. Without a better understanding of your app, I'd guess it could be something like this:

<person-data :grades="{{ $grades }}" :categories="{{ $categories }}" :ages="{{ $ages }}"></person-data>

then the vue component:

var PersonData = Vue.extend({
  props:['grades','categories','ages']
});
1
votes

You have two choices:

You can create the option elements using blade's foreach method:

@foreach ($grades as $grade)
    <option ...>{{ $grade }}</option>
@endforeach

Or you can create a dedicated component for your grades with your template and pass in the $grades variable. For example: 

<grades :grades="{{ $grades }}"></grades>