Ggtcf

Why don't electromagnetic waves interact with each other?

Why doesn't Newton's third law mean a person bounces back to where they started when they hit the ground?

Languages that we cannot (dis)prove to be Context-Free

Is this a crack on the carbon frame?

Writing rule which states that two causes for the same superpower is bad writing

Mathematical cryptic clues

Why are 150k or 200k jobs considered good when there are 300k+ births a month?

Basic combinations logic doubt in probability

Why was the small council so happy for Tyrion to become the Master of Coin?

Why did the Germans forbid the possession of pet pigeons in Rostov-on-Don in 1941?

Is it tax fraud for an individual to declare non-taxable revenue as taxable income? (US tax laws)

Creating a document with mixed languages

How to say job offer in Mandarin/Cantonese?

can i play a electric guitar through a bass amp?

Are the number of citations and number of published articles the most important criteria for a tenure promotion?

LaTeX closing $ signs makes cursor jump

How does one intimidate enemies without having the capacity for violence?

In Japanese, what’s the difference between “Tonari ni” (となりに) and “Tsugi” (つぎ)? When would you use one over the other?

Can I make popcorn with any corn?

How is the claim "I am in New York only if I am in America" the same as "If I am in New York, then I am in America?

Modeling an IPv4 Address

Do VLANs within a subnet need to have their own subnet for router on a stick?

Do I have a twin with permutated remainders?

How does strength of boric acid solution increase in presence of salicylic acid?

Laravel VUE JS dynamic drop down menu

Laravel 4 How to show selected values in a dropdown menu by using the input::old() method?Laravel form model binding with dropdown thats populated form tableSending data in Laravel using Axios & VueVue 2 Dynamic Model with V-for loop pass v-modelVue JS prop in component always undefinedUpload file from VueJS app to API in LaravelVue2 : Handle change events on X number of dropdowns ?How do I write ajax endpoints for my vue app to grab data from database while allowing only my vue app to call them?vue element el-select can't show label according to v-modelUnable to Retrieve data from dynamically linked select drop down - Laravel

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

Why doesn't this work?
Here is my select tag:

<select class="form-control" v-model="provider">
 <option value="0">Select Provider</option>
 <option v-for="provider in providers" :value="provider.provider_id">provider.name</option>
</select>

Code which loads the data:

loadProviders(){
 axios.get('api/provider').then((data) => (this.providers = data.data));

data is then stored in:

data()
 return
 providers : 
 
 

I've checked the developer networks tab of Chrome and it does return the data from the database.
However the value(provider.name) doesnt show up in the dropdown options menu.

This issue has already been solved: the model for Provider had an error all along.

laravel vue.js

share|improve this question

edited Mar 9 at 3:21

Nel

asked Mar 6 at 17:34

NelNel

165

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Have you checked with Vue developer tools that the data of the component is what you expect?
  
  – Lassi Uosukainen
  Mar 6 at 17:38
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It was empty all along, was able to fix it by checking on my provider model. Thanks.
  
  – Nel
  Mar 6 at 17:44
  

  
  
  
  

add a comment | 

0

Why doesn't this work?
Here is my select tag:

<select class="form-control" v-model="provider">
 <option value="0">Select Provider</option>
 <option v-for="provider in providers" :value="provider.provider_id">provider.name</option>
</select>

Code which loads the data:

loadProviders(){
 axios.get('api/provider').then((data) => (this.providers = data.data));

data is then stored in:

data()
 return
 providers : 
 
 

I've checked the developer networks tab of Chrome and it does return the data from the database.
However the value(provider.name) doesnt show up in the dropdown options menu.

This issue has already been solved: the model for Provider had an error all along.

laravel vue.js

share|improve this question

edited Mar 9 at 3:21

Nel

asked Mar 6 at 17:34

NelNel

165

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Have you checked with Vue developer tools that the data of the component is what you expect?
  
  – Lassi Uosukainen
  Mar 6 at 17:38
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It was empty all along, was able to fix it by checking on my provider model. Thanks.
  
  – Nel
  Mar 6 at 17:44
  

  
  
  
  

add a comment | 

Why doesn't this work?
Here is my select tag:

<select class="form-control" v-model="provider">
 <option value="0">Select Provider</option>
 <option v-for="provider in providers" :value="provider.provider_id">provider.name</option>
</select>

Code which loads the data:

loadProviders(){
 axios.get('api/provider').then((data) => (this.providers = data.data));

data is then stored in:

data()
 return
 providers : 
 
 

I've checked the developer networks tab of Chrome and it does return the data from the database.
However the value(provider.name) doesnt show up in the dropdown options menu.

This issue has already been solved: the model for Provider had an error all along.

laravel vue.js

share|improve this question

edited Mar 9 at 3:21

Nel

asked Mar 6 at 17:34

NelNel

165

<select class="form-control" v-model="provider">
 <option value="0">Select Provider</option>
 <option v-for="provider in providers" :value="provider.provider_id">provider.name</option>
</select>

loadProviders(){
 axios.get('api/provider').then((data) => (this.providers = data.data));

data()
 return
 providers : 
 
 

share|improve this question

edited Mar 9 at 3:21

Nel

asked Mar 6 at 17:34

NelNel

165

share|improve this question

edited Mar 9 at 3:21

Nel

asked Mar 6 at 17:34

NelNel

165

asked Mar 6 at 17:34

NelNel

165

asked Mar 6 at 17:34

NelNel

165

2 Answers
2

active

oldest

votes

0

The issue is, that you are destructuring the API response, but don't take into account that when assigning to data.

axios.get('api/provider').then((data) => (this.providers = data.data));

and

 axios.get('api/provider').then((data) => (this.providers = data));

both work.

share|improve this answer

answered Mar 6 at 17:49

Lassi UosukainenLassi Uosukainen

675616

add a comment | 

0

Update your select box

<select v-model="provider">
 <option v-for="(value,key) in provider" 
 :value="value.provider_id">
 value.name
 </option>
</select>

Make sure you received proper data from your API.
assign data to provider variable. it will appeare in select box

share|improve this answer

answered Mar 7 at 7:43

bhavinjrbhavinjr

888213

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55029061%2flaravel-vue-js-dynamic-drop-down-menu%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

The issue is, that you are destructuring the API response, but don't take into account that when assigning to data.

axios.get('api/provider').then((data) => (this.providers = data.data));

and

 axios.get('api/provider').then((data) => (this.providers = data));

both work.

share|improve this answer

answered Mar 6 at 17:49

Lassi UosukainenLassi Uosukainen

675616

add a comment | 

0

The issue is, that you are destructuring the API response, but don't take into account that when assigning to data.

axios.get('api/provider').then((data) => (this.providers = data.data));

and

 axios.get('api/provider').then((data) => (this.providers = data));

both work.

share|improve this answer

answered Mar 6 at 17:49

Lassi UosukainenLassi Uosukainen

675616

add a comment | 

The issue is, that you are destructuring the API response, but don't take into account that when assigning to data.

axios.get('api/provider').then((data) => (this.providers = data.data));

and

 axios.get('api/provider').then((data) => (this.providers = data));

both work.

share|improve this answer

answered Mar 6 at 17:49

Lassi UosukainenLassi Uosukainen

675616

axios.get('api/provider').then((data) => (this.providers = data.data));

 axios.get('api/provider').then((data) => (this.providers = data));

share|improve this answer

answered Mar 6 at 17:49

Lassi UosukainenLassi Uosukainen

675616

answered Mar 6 at 17:49

Lassi UosukainenLassi Uosukainen

675616

answered Mar 6 at 17:49

Lassi UosukainenLassi Uosukainen

675616

0

Update your select box

<select v-model="provider">
 <option v-for="(value,key) in provider" 
 :value="value.provider_id">
 value.name
 </option>
</select>

Make sure you received proper data from your API.
assign data to provider variable. it will appeare in select box

share|improve this answer

answered Mar 7 at 7:43

bhavinjrbhavinjr

888213

add a comment | 

0

Update your select box

<select v-model="provider">
 <option v-for="(value,key) in provider" 
 :value="value.provider_id">
 value.name
 </option>
</select>

Make sure you received proper data from your API.
assign data to provider variable. it will appeare in select box

share|improve this answer

answered Mar 7 at 7:43

bhavinjrbhavinjr

888213

add a comment | 

Update your select box

<select v-model="provider">
 <option v-for="(value,key) in provider" 
 :value="value.provider_id">
 value.name
 </option>
</select>

Make sure you received proper data from your API.
assign data to provider variable. it will appeare in select box

share|improve this answer

answered Mar 7 at 7:43

bhavinjrbhavinjr

888213

<select v-model="provider">
 <option v-for="(value,key) in provider" 
 :value="value.provider_id">
 value.name
 </option>
</select>

share|improve this answer

answered Mar 7 at 7:43

bhavinjrbhavinjr

888213

answered Mar 7 at 7:43

bhavinjrbhavinjr

888213

answered Mar 7 at 7:43

bhavinjrbhavinjr

888213