Refactor blade code into vue code

@kaziux The real question you ask here is "Can you build my website for me?".

What have you tried so far? Why do you want to switch to Vue? Your current code already looks good and seems to work right?

So basically what you are looking for is How to loop without wrapping element ? Following will do the job

<template v-for="organization in organizations">
	<template v-for="team in organization.teams">
		{{ team.name }}
	</template>
</template>

Because i want fetch teams which belongs to certain organization. My all front-end use Vue. Organizations can have many teams. @ravish I tried to do your approach doesn't work.

@kaziux I tried it before posting the solution here. It worked just fine for me! There is no rocket science in this. It should work just fine unless your data object/array is not structured properly. What error are you getting?

I can't select any teams, it returns normal response. Ok, for making picture clear, I can post my controller code how i get data

public function invitees(){
      $users = User::all()->except(Auth::user()->id);

        $organizations = Organization::all();


        $teams = Team::all();

        return response()->json(['users' => $users,
            'organizations' => $organizations,
            'teams' => $teams], 200);
}

I don't think what you are doing is correct, but if there is no relationship between organizations and teams and you want to display all teams in all organizations then here is how you should do it,

<template v-for="organization in organizations">
	<template v-for="team in teams">
		{{ team.name }}
	</template>
</template>

Though it does not make any sense.

If there is a relationship between organization and teams, then you first need to retrieve data properly.

$organizations = Organization::with('teams')->get();

!! AND !! make sure you have defined relationships in both models, Organization and Team.

Yeah, I get proper response what i expecting but when i use your earlier v-for approach, still doesn't show anything. According to the idea, it should work fine

Sorry, cannot help based on the information you have provided. Share code of your controller and vue component.

Inside your blade file pass data to Vue template

Something like this

//Blade file
    <div id="app">

	//Vue template
        <profile-view :user='@json($user)'>

        </profile-view>

    </div>

Vue component code:

<template>
<div>
    <h2 style="text-align: center">User invitation</h2>
        <div class="container">
            <div class="card card-default">
                <div class="card-header">User Invitation </div>
                <div class="alert alert-danger" v-if="errors.length">
                    <b>Please correct the following error(s):</b>
                    <ul>
                        <li v-for="error in errors">{{ error }}</li>
                    </ul>
                </div>
                <div class="card-body">
                    <form @submit.prevent="inviteUser">
                        <div class="form-group">
                            <label>Assigned user</label>
                            <select class="form-control" v-model="invitee.usermail">
                                <option value="">-</option>
                                <option v-for="user in users"  v-bind:value="user.email">{{ user.name }}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Organization</label>
                            <select class="form-control" v-model="invitee.organization">
                                <option value="">-</option>
                                <option v-for="organization in organizations"  v-bind:value="organization.name">{{ organization.name }}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Assigned team</label>
                            <select class="form-control" v-model="invitee.team">
                                <option value="">-</option>
                                <div v-for="organization in organizations"
                                :organization="organization">
                                     <option v-for="team in organization.teams" v-bind:value="team.name">{{team.name}}</option>
                                </div>
                            </select>
                        </div>
                            <button type="submit" class="btn btn-success">Invite user</button>
                        </form>
                </div>
            </div>
        </div>


</div>
</template>

<script>
export default
{
    data()
    {
        return {
            errors: [],
            organizations: {},
            users: {},
            invitee: {},
        }
    },
    mounted(){
        this.getUsers()
    },
    methods:{
        validateInvite(){
            if(this.invitee.organization == '') this.errors.push("Please assign organization")
            if(this.invitee.usermail == '') this.errors.push("Please assign usermail")
            if(this.invitee.team == '') this.errors.push("Please assign team")
            return this.errors;
        },
        getUsers() {
                this.axios
                    .get('http://local.requestmapper.com/api/invitee')
                    .then(response => {
                        this.users = response.data.users
                        this.organizations = response.data.organizations
                        //this.teams = response.data.organizations.teams
                    })
                    .catch(error => console.log(error))
                    .finally(() => this.loading = false)
        }
</script>

The problem you have here is still same as before and also described above. In your frontend code, there is a relationship between teams and organizations, but we don't see that in your code.

If you have this relationship setup you can do something like this in your controller. No need to pass the teams as a separated array to the response.

// Controller

$organizations = Organization::with('teams')->get();

Then in the frontend you can do this

// In the callback of the API call
this.organizations = response.data.organizations

// In your template you can do this
<select class="form-control" v-model="invitee.team">
    <option value="">-</option>

    <div v-for="organization in organizations">
        <option v-for="team in organization.teams" 
                     v-bind:value="team.name">
            {{ team.name }} [{{ organization.name }}]
        </option>
    </div>
</select>

@bobbybouwmann your idea did a trick. Thanks for that. It's possible to do, when I select certain organization, in team field, shows teams which belong to selected organization.

Model: Team.php

   public function organization()
    {
        return $this->belongsTo('App\Organization');
    }

Model: Organization.php 

  public function teams()
    {
        return $this->hasMany('App\Team', 'owner_id');
    }

Yeah, you can. Normally you would do a new API request and only fetch the teams that belong to the organization of the given ID. That works the same as the API call you do now already.

Here is an example: https://morioh.com/p/2aec3f29a0cb