nanadjei2

Experience

14,140

1 Best Reply Awards

  • Member Since 3 Years Ago
  • 30 Lessons Completed
  • 1 Favorite

19th June, 2018

nanadjei2 left a reply on Do You Put Multiple Users In The `users` Table Or Create Separate Tables For Each Of Them `customer` And`admin` • 1 month ago

Thank you all for your contribution. I think the decision is clear now :)

nanadjei2 started a new conversation Do You Put Multiple Users In The `users` Table Or Create Separate Tables For Each Of Them `customer` And`admin` • 1 month ago

I have been contemplating about this issue for a while. Please I want to know if you are asked to create multiple users for the app where customers, admins, and auditors will be using it, will you create separate tables for them or you you will create a single table and assign roles and permissions ?

7th June, 2018

nanadjei2 started a new conversation Model::updateOrCreate Actually Updates But Does Not Create When Record Does Not Exist • 1 month ago

I am building an app where if a user wants to update records he/she can edit and add more fields so that does data in the fields can be added to the already existing records and he/she edited anything that too can change successfully. I hope you get the basic idea.

This is my HTML:

     <table class="table table-bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>Contraceptive pill</th>
            <th>UID</th>
            <th>Implant</th>
            <th>Injectable</th>
            <th>Male condom</th>
            <th>Female condom</th>
            <th>Fertility awareness</th>
            <th>Withdrawal</th>
            <th>Sterilization</th>
            <th>Emergency contraceptive</th>
            <th>Actions</th>
        </tr>
    </thead>
   <tbody id="test-inputs">
                
        <tr v-for="(option, index) in options">

        <td>@{{ index + 1}}</td>

        <td>
            <input class="form-control" :class="`optionId${option.id}`" 
                   type="number" name="contraceptive_pills[]" :value="option.contraceptive_pill" required> 

            </td>

        <td> <input class="form-control" :class="`optionId${option.id}`" 
                type="number" name="uids[]" :value="option.uid" required> 
        </td>

        <td> <input class="form-control" :class="`optionId${option.id}`" 
                type="number" name="implants[]" :value="option.implant" required> 
        </td>

        <td> <input class="form-control" :class="`optionId${option.id}`" 
                type="number" name="injectables[]" :value="option.injectable" required> 
        </td>

        <td> <input class="form-control" :class="`optionId${option.id}`" 
                type="number" name="male_condoms[]" :value="option.male_condom" required> 
        </td>

        <td> <input class="form-control"  :class="`optionId${option.id}`" 
                type="number" name="female_condoms[]" :value="option.female_condom" required> 
        </td>

        <td> <input class="form-control" :class="`optionId${option.id}`" 
                type="number" name="fertility_awareness[]" :value="option.fertility_awareness" required> 
        </td>

        <td> <input class="form-control" :class="`optionId${option.id}`" 
                type="number" name="withdrawals[]" :value="option.withdrawal" required> 
        </td>

        <td> <input class="form-control" :class="`optionId${option.id}`" 
                type="number" name="sterilizations[]" :value="option.sterilization" required> 
        </td>

        <td> <input class="form-control" :class="`optionId${option.id}`" 
                type="number" name="emergency_contraceptives[]" :value="option.emergency_contraceptive" required> 
        </td>
                            
        <td>
                        
        <a :id="`deleteBtn${option.id}`" @click.prevent="deleteRow(index, option.id)" 
                        :href="`${baseUrl}/delete/${option.id}`" 
                            type="submit" class="btn btn-danger" title="delete"><i class="fa fa-trash"></i>
                  </a>

        </td>   
                                            
        </tr>
                    
            </tbody>
        </table>

    <div class="form-group" style="padding-bottom: 10px;">
        <button type="submit" class="btn primary"><i class="fa fa-save"></i> Update</button>
    </div>

This is my script that will add new set of form:

     populateNewTestForms() {
            $('#test-inputs').append(`
                <tr>

            <td>${this.incrementTableCounter+=1}</td>
                        
            <td><input class="form-control" type="number" name="contraceptive_pills[]" required> </td>

            <td> <input class="form-control" type="number" name="uids[]" required> </td>

            <td> <input class="form-control" type="number" name="implants[]" required> </td>

            <td> <input class="form-control" type="number" name="injectables[]" required> </td>

            <td> <input class="form-control" type="number" name="male_condoms[]" required> </td>

            <td> <input class="form-control" type="number" name="female_condoms[]" required> </td>

            <td> <input class="form-control" type="number" name="fertility_awareness[]" required> </td>

            <td> <input class="form-control" type="number" name="withdrawals[]" required> </td>

            <td> <input class="form-control" type="number" name="sterilizations[]" required> </td>

            <td> <input class="form-control" type="number" name="emergency_contraceptives[]" required> 
            </td>
                            
            <td>
                            
    <button type="button" onclick=" $(this).closest('tr').remove(); " class="btn btn-danger" title="delete"><i class="fa fa-trash"></i></button>

            </td>   
                                            
        </tr>
            `);

This is my controller :

   foreach ($request->option_ids as $option_id) {
            
            TestOption::updateOrCreate(['id'   =>  $option_id], [

                'test_id'   =>  $test->id,

                'name'      =>  $request->names[$i],

                'contraceptive_pill'      =>  $request->contraceptive_pills[$i],

                'uid'     =>  $request->uids[$i],

                'implant'     =>  $request->implants[$i],

                'injectable'     =>  $request->injectables[$i],

                'male_condom'     =>  $request->male_condoms[$i],      

                'female_condom'     =>  $request->female_condoms[$i],

                'fertility_awareness'     =>  $request->fertility_awareness[$i],

                'withdrawal'     =>  $request->withdrawals[$i],

                'sterilization'     =>  $request->sterilizations[$i],

                'emergency_contraceptive'     =>  $request->emergency_contraceptives[$i]

                ]);

It is able to update but not create. Thank you.

1st June, 2018

nanadjei2 left a reply on Image Upload With Intervention Image - Error "Image Source Not Readable" • 1 month ago

     const fileInput = document.querySelector( '#image' );
     const formData = new FormData();
      formData.append( 'image', fileInput.files[0] );

      axios.post( '/spa/slider/images/', formData )
    .then( ( response ) => {
           console.log(response.data);
      } )
        .catch( ( error ) => {
    console.log(error.response);
     } );

@Cronix Thank you so much. Your solution worked.

@jake.admin@gmail.com Thank you for the tip as well.

31st May, 2018

nanadjei2 started a new conversation Image Upload With Intervention Image - Error "Image Source Not Readable" • 1 month ago

I am creating a single page application with vue.js and laravel. I want to upload an Image with ajax but I keep getting this error "Image source not readable"

This is my vue component.

     <form @submit.prevent="create" action="/spa/slider/images/" method="POST" enctype="multipart/form-data">

    <div class="box">
        <div class="box-header">
            <h2>Slider Image</h2>

        </div>
        <div class="box-divider m-0"></div>

        <div class="box-body">
            <div class="form-group">
                <input id="image" type="file" class="form-control" :class="{ 'is-invalid': errors.has('image') }" name="image" v-validate="'required|image'" >
                            <span :class="`invalid-feedback`" v-show="errors.has('image')"><strong>{{ errors.first('image') }}</strong></span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <button type="submit" class="btn primary"><i class="fa fa-check"></i> Submit</button>
   </div>
</form> 

This is my ajax

   create() {
        let $this = this;

        this.$validator.validateAll().then(() => {

            axios({

            method: 'POST',

            url: '/spa/slider/images/',

            data: {
                token: this.token,
                image: $('#image').val()
            }

          }).then((response) => {
              console.log(response.data);

          }).catch((error) => {
              console.log(error.response);

          });

        });
        
      } // create function ends here

This is my controller:

   if($file = $request->has('image')) {
            /***********************  Extra-small Devices  ************************/  
            $drawable_mdpi = time().'xsm' . '.' . $request->image;

            Image::make($request->image)->resize(401, 267)
                ->save(SliderImage::imageHandlerType('upload', $drawable_mdpi));

    SliderImage::create([

               'drawable_mdpi'     =>  $drawable_mdpi
        ]);
    }

30th May, 2018

nanadjei2 left a reply on How To Get Falsh Messages In Laravel Like Alert In Java Script? • 1 month ago

Unless you use a plugin or a package like https://github.com/uxweb/sweet-alert. Hope this helps.

10th May, 2018

nanadjei2 left a reply on Checkbox Toggle Value Not Returning • 2 months ago

If I do that, I dont get my checkboxes checking like so: https://pasteboard.co/HkvuQKZ.jpg

nanadjei2 started a new conversation Checkbox Toggle Value Not Returning • 2 months ago

This is my html:

      <tr v-for="(user, index) in users">
    <td>@{{ index + 1 }}</td>
    <td v-text="user.name"></td>
    <td>@{{ user.email }}</td>
    <td>@{{ user.status }}</td>
    <td>
        <div class="btn-group pull-rights" role="group" aria-label="action-btns">
        <form :id="`statusform${user.id}`" :action="`${baseUrl}/${user.id}/update/status`" method="POST">
        {{ csrf_field() }} {{ method_field('PUT') }}
    <label class="ui-switch mt-1 mr-2">
     <input :id="`checkbox${user.id}`" @click="onSwitchStatus(user.id)" type="checkbox" name="status" true-value="active" false-value="inactive" :value="user.status" v-model="statuses=user.status">
    <i></i>
         </label>
    </form>

    </div>
  </td>
</tr>

This is my script:

    const vm = new Vue({

    el: '#vueHook',

    data: {

        statuses: [],

        baseUrl: baseUrl+'/admin/manage/users',

        users: [
            { id:'1', name:'Prof. Kathryne Waelchi', email:'[email protected]', status: 'active' },
            { id:'2', name:'Monique Leannon', email:'[email protected]', status: 'inactive' },
            { id:'3', name:'Magnus Waelchi', email:'[email protected]', status: 'active' },
            { id:'4', name:'Ms. Laurianne Simonis', email:'[email protected]', status: 'inactive' },
            { id:'5', name:'Dr. Doris Runte', email:'[email protected]', status: 'inactive' },
            { id:'6', name:'Imani Smitham', email:'[email protected]', status: 'active' },
            { id:'7', name:'Mrs. Mozell Keeling', email:'[email protected]', status: 'active' },
            { id:'8', name:'Sylvester Kemmer III', email:'[email protected]', status: 'inactive' },
            { id:'9', name:'Percival Kerluke', email:'[email protected]', status: 'inactive' },
                        
        ]

    },

    methods: {

        axiosHeaders() {
            axios.create({
                timeout: 1000,
                headers: {'X-Custom-Header': token}
            });
        },

        onSwitchStatus(id) {
            let $this = this;

            $('#statusform'+id).submit(function(e) {
                e.preventDefault();
            });

            this.axiosHeaders();

            console.log(this.statuses);
          
        }
    
    }

})

8th May, 2018

nanadjei2 left a reply on Array Data Not Storing In Database • 2 months ago

Sorry guys the issue is reserved. The data was returning to the db successfully but because I have tried couple of times it exceeded the number of data to display per page so I should have clicked on next to show the next set of data which I was still viewing the 1st page :(

nanadjei2 left a reply on Array Data Not Storing In Database • 2 months ago

@AlexDemin I still get the exact same thing. And data does not show in db.

@tykus Am getting Undefined variable: test

nanadjei2 started a new conversation Array Data Not Storing In Database • 2 months ago

Am building an app where users can add more input fields and store data those data all at once: test_id, name and score in a table called TestOptions. I get my success message but data not present in database.

This is my view:

   <div class="form-group row">
       <div class="col-md-10">
         <input type="text" class="form-control" name="name[]" id="testOptions" value="">
      </div>
    <div class="col-md-2">
         <input type="text" class="form-control" name="score[]" id="testOptions" value="">
      </div>
  </div>

  <div class="form-group row">
       <div class="col-md-10">
         <input type="text" class="form-control" name="name[]" id="testOptions" value="">
      </div>
    <div class="col-md-2">
         <input type="text" class="form-control" name="score[]" id="testOptions" value="">
      </div>
  </div>

This is my controller:

  public function store(Request $request)
      {
        //dd($request->name, $request->score); 

        $request->validate(Test::$rules);

        $test = Test::create(['title' =>  $request->title, 'question' =>  $request->question]);

        $i = 0;

        foreach ($request->name as $option) {

           \App\TestOption::create([

                'test_id'   =>  $test->id,

                'name'      =>  $option,

                'score'     =>  $request->scores[$i]
                
            ]);

           $i++;
       }
    

        return back()->with('success', 'You have successfully added a new test');

     }

7th May, 2018

nanadjei2 left a reply on Add Id From V-for To Dom Elements • 2 months ago

@wilk_randall Please you don't get me. My problem is not to display a counter. Kindly look at

   <form id="statusform" :action="baseUrl+/user.id" method="POST">

baseUrl = '‘localhost/project/user/edit/' therefore I want to the action="‘localhost/project/user/edit/1/" but am still getting "baseUrl+/user.id"

nanadjei2 started a new conversation Add Id From V-for To Dom Elements • 2 months ago

I am making a for loop with vuejs and displaying a list of users in a table. I want to add the id of users to the action attribute of a form element or classes of the elements in the table items.

This is my html:

@{{ key+1 }} @{{ user.email }} @{{ user.status }} Am using laravel. I want the action attribute of the form to be for example… ‘localhost/project/user/edit/1/’ but it is not working. Can anyone help me;

nanadjei2 left a reply on Htmlspecialchars() Expects Parameter 1 To Be String, Array Given • 2 months ago

these are my testOption rules:

  protected $fillable = ['test_id', 'name', 'score'];

   // The rules for form validation
   public static $rules = [

       'name'           => 'required|array|min:2',

       'name.*'         => 'required|distinct|min:2',

       'score'          =>  'required|array|numeric',

       'score.*'        =>  'required|distinct|numeric'
    ];

I don't know if am right.

nanadjei2 left a reply on Htmlspecialchars() Expects Parameter 1 To Be String, Array Given • 2 months ago

Thank you but I have return 'Passed validations'; So when the code is running it does not pass that point and then it returnshtmlspecialchars() expects parameter 1 to be string, array given

nanadjei2 left a reply on Htmlspecialchars() Expects Parameter 1 To Be String, Array Given • 2 months ago

I have updated the question with my controller and a relationship

nanadjei2 started a new conversation Htmlspecialchars() Expects Parameter 1 To Be String, Array Given • 2 months ago

I am trying to post an array of data. But I keep getting this error htmlspecialchars() expects parameter 1 to be string, array given

This is my view:

    <div class="form-group row">
    <div class="col-md-10">
        <input type="text" class="form-control" name="name[]" id="testOptions" placeholder="Enter option two"
        value="{{ old('name.1') }}">
    </div>
    <div class="col-md-2">
        <input type="text" class="form-control" name="score[]" id="testOptions" placeholder="Enter option two score"
        value="{{ old('score.1')}}">
    </div>
</div>

<div class="form-group row">
    <div class="col-md-10">
        <input type="text" class="form-control" name="name[]" id="testOptions" placeholder="Enter option two"
        value="{{ old('name.2') }}">
    </div>
    <div class="col-md-2">
        <input type="text" class="form-control" name="score[]" id="testOptions" placeholder="Enter option two score"
        value="{{ old('score.2') }}">
    </div>
</div>

<div class="form-group row">
    <div class="col-md-10">
        <input type="text" class="form-control" name="name[]" id="testOptions" placeholder="Enter option two"
        value="{{ old('name.3') }}">
    </div>
    <div class="col-md-2">
        <input type="text" class="form-control" name="score[]" id="testOptions" placeholder="Enter option two score"
        value="{{ old('score.3') }}">
    </div>
    </div>

If I dd($request->all(). I get...

  "name" => array:4 [▼
    0 => "Keelie Bennett"
    1 => "Solomon Pierce"
    2 => "Jessica Crosby"
    3 => "Kaden Thomas"
  ]

  "score" => array:4 [▼
   0 => "12"
    1 => "21"
   2 => "31"
   3 => "21"
  ]

4th May, 2018

nanadjei2 left a reply on Get The User Who Belongs To A Thread. • 2 months ago

Thank you so much everything works fine

3rd May, 2018

nanadjei2 left a reply on Get The User_id Of A Guard • 2 months ago

@Vilfago Thank you man. You nailed it. Thank you too @Cronix

nanadjei2 left a reply on Get The User_id Of A Guard • 2 months ago

   public function store(Request $request)
      {
         return Auth::guard('admin')->id; // to check if the id is returning successfully

         $request->validate(Thread::$rules);

         Thread::create([

            'user_id'           =>  Auth::guard('user') ? 
                                    Auth::guard('user')->id : 
                                    Auth::guard('admin')->id ,

            'category_id'       =>  $request->category_id,

            'title'             =>  $request->title,

            'content'           =>  $request->content,

            'status'            =>  $request->status

           ]);

        return back()->with('success', 'A new thread has been successfully created');
     }

nanadjei2 started a new conversation Get The User_id Of A Guard • 2 months ago

I want to get the id of an authenticated admin user of my application but it returns error Undefined property: Illuminate\Auth\SessionGuard::$id

nanadjei2 left a reply on Get The User Who Belongs To A Thread. • 2 months ago

wooow... Thank you man. It worked.

I will do that for comments and see how it will work out. When anything comes up I will let you know then I will mark your answer as the best one. Thank you so much for your time.

nanadjei2 started a new conversation Get The User Who Belongs To A Thread. • 2 months ago

I have a threads table where either a user or admin can post a new thread.That means I have a "users table" and "admin table" . I want to retrieve the user's name of each thread. Can anyone help me out please.

This is my migrations;

  public function up()
       {
          Schema::create('threads', function (Blueprint $table) {
              $table->engine = 'InnoDB';
             $table->increments('id');
              // $table->unsignedInteger('user_id')->reference('id')->on('users')->onDelete('restrict');
        
             $table->unsignedInteger('user_id');
             $table->string('user_type', 50)->nullable();

             $table->unsignedInteger('category_id')->reference('id')->on('categories')->onDelete('restrict');        
             $table->string('title');
             $table->text('content');
             $table->bigInteger('likes')->nullable();
             $table->bigInteger('views')->nullable();
             $table->enum('resolved_status', ['Resolved', 'Awaiting...'])->default('Awaiting...');
             $table->enum('status', ['Draft', 'Published'])->default('Draft');
             $table->timestamps();
           });
       }

This is my relationship in Threads.php

              public function user()
            {
                 return $this->morphMany(User::class, 'users', 'user_type', 'user_id');
            }

This is the link to my db image https://pasteboard.co/HjsK6hd.jpg

2nd May, 2018

nanadjei2 started a new conversation How Do I Write A View Counter Logic - The Number Of People Who Read A Particular Thread? • 2 months ago

I am building an app where I want to implement a view counter where I could count the number of users viewing a particular thread and also prevent an already existing viewed user from adding up to the count once again.

Thank you.

28th April, 2018

nanadjei2 left a reply on Pjax And Script Loading • 2 months ago

@push('scripts') $(document).ready(function() { ..... }); @endpush

25th April, 2018

nanadjei2 left a reply on Prevent .env File From Been Accessed On A Server. • 2 months ago

It is Apache

nanadjei2 left a reply on Prevent .env File From Been Accessed On A Server. • 2 months ago

Please how do I determine if it is Apache/nginx?

nanadjei2 started a new conversation Prevent .env File From Been Accessed On A Server. • 2 months ago

I have a shared host website but I want to prevent .env file from been access from outside. Please how do I do it?

5th April, 2018

nanadjei2 left a reply on Hide Url Parameters • 3 months ago

Thank you guys. I was supposed to do a redirect not return a view.

nanadjei2 left a reply on Hide Url Parameters • 3 months ago

@liquidsword Yeah am using slydepay.

nanadjei2 started a new conversation Hide Url Parameters • 3 months ago

I am making a request to an api but the call back url has gotten some parameters in it.

For example: http://localhost/project/donate/payment/callback?status=0&transac_id=&pay_token=&cust_ref=******

How do make only http://localhost/project/donate/payment/callback show in the address bar when redirecting ?

28th March, 2018

nanadjei2 left a reply on Testing Mailtrap.io On A Server • 3 months ago

Please do kindly assist me with the configuration of a shared host email with laravel.

nanadjei2 left a reply on Testing Mailtrap.io On A Server • 3 months ago

@Snapey Am not using it as my actual mail service. I wanted to know if my nothing has broken and the mail still works as locally that is all what I wanted to do.

nanadjei2 left a reply on Testing Mailtrap.io On A Server • 3 months ago

Ohh I see based on this https://d.pr/free/i/Gihv3e you pasted. Mailtrap cannot be used in production. Then I don't have any problem with that once am getting my success message I can proceed is that right?

nanadjei2 left a reply on Testing Mailtrap.io On A Server • 3 months ago

ok I will try that thank you.

nanadjei2 left a reply on Testing Mailtrap.io On A Server • 3 months ago

Still the error persist. Getting my success message but mail not received in mailtrap.io

nanadjei2 left a reply on Testing Mailtrap.io On A Server • 3 months ago

Yes I have tried that and I get my success message but the email does not show in mailtrap.io

nanadjei2 started a new conversation Testing Mailtrap.io On A Server • 3 months ago

I have just push a project to development and I want to test the mail with mailtrap.io API. The configuration works on my local machine but not on the shared host server.

I get this error... production.ERROR: Connection could not be established with host smtp.mailtrap.io [Connection refused #111] {"exception":"[object] (Swift_TransportException(code: 0): Connection could not be established with host smtp.mailtrap.io

This is my .env

     MAIL_DRIVER=smtp
     MAIL_HOST=smtp.mailtrap.io
     MAIL_PORT=2525
     MAIL_USERNAME=**************
     MAIL_PASSWORD=***************
     MAIL_ENCRYPTION=tls

Can any help me.

27th March, 2018

nanadjei2 left a reply on Make Url Secured • 3 months ago

Alright I will look into LetsEncrypt. Thank you

26th March, 2018

nanadjei2 left a reply on Make Url Secured • 3 months ago

@jlrdw I have tried may solutions online including yours. but still none of them works for me

nanadjei2 left a reply on Make Url Secured • 3 months ago

nanadjei2 started a new conversation Make Url Secured • 3 months ago

I have just pushed my project to production but the url reads http but I want it read https. Am using laravel 5.5. Can anyone help me?

21st March, 2018

nanadjei2 left a reply on Perform A Function Base On What User Select From A Select Box • 4 months ago

I want the value of the option to be country.name not country.code

nanadjei2 started a new conversation Perform A Function Base On What User Select From A Select Box • 4 months ago

Am new to vue.js and I want to display the country code of a selected country in an input field. Can anyone help me ? Thank you.

  <div id="app" class="container"> <br>
    <div class="row justify-content-md-center">
      <div class="col-md-4">
         <select class="form-control" v-model="countryCode" @change="changeCountryCode">
             <option v-for="country in countries" value="country.name">{{ country.name }}</option>
         </select>
      </div>

      <div class="col-md-4">
         <input type="text" class="form-control" v-model="countryCode">
      </div>
   </div>
 </div>

Script:

 <script>
  const vm = new Vue({

      el: '#app',

      data: {
        countryCode: '',

        countries: [
            { id:1, name: 'Afghanistan', code: '+93' },
            { id:2, name: 'Albania', code: '+355' },
            { id:3, name: 'Algeria', code: '+213' },
            { id:4, name: 'American Samoa', code: '1-684' }
        ]
      },

      methods: {
        changeCountryCode(country) {
            console.log(country.code);
         }
       }
    });

20th March, 2018

nanadjei2 left a reply on Perform A Function From A Select Box. • 4 months ago

Am looking at a situation where I will post the name of the country in my database that means I cannot do that because I have the country code as the value instead of the country name. Please do you get me?

nanadjei2 left a reply on Perform A Function From A Select Box. • 4 months ago

Please kindly have a look at @wilk_randall answer. You will notice that the attribute value of the select element is country.code . So am asking if the value of the select element is country.name. I don't know if you get what I mean

nanadjei2 left a reply on Perform A Function From A Select Box. • 4 months ago

What if the value of the select box is the name of the country. Like so :

      <div class="col-md-4">
     <select v-model="countryCode" class="form-control">
      <option value="">-- Please Select One --</option>
        <option v-for="country in countries" value="country.name">{{ country.name }}</option>
            </select>
  </div>

nanadjei2 left a reply on Perform A Function From A Select Box. • 4 months ago

Thank you @rin4ik

nanadjei2 started a new conversation Perform A Function From A Select Box. • 4 months ago

Am new to vue.js and I want to display the country code of a selected country in an input field. Can anyone help me ? Thank you.

{{ country.name }}
        <div class="col-md-4">
            <input type="text" class="form-control" v-model="countryCode">
        </div>
    </div>
</div>

Script:

const vm = new Vue({
        el: '#app',

        data: {
            countryCode: '',

            countries: [
                { id:1, name: 'Afghanistan', code: '+93' },
                { id:2, name: 'Albania', code: '+355' },
                { id:3, name: 'Algeria', code: '+213' },
                { id:4, name: 'American Samoa', code: '1-684' }
            ]
        },

        methods: {
            changeCountryCode(country) {
                console.log(country.code);
            }
        }
    });
</script>
Edit Your Profile
Update

Want to change your profile photo? We pull from gravatar.com.