Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

hellomars's avatar

Adding Profile Fields to Settings page

Dear Sparkers,

I tried to stay away from the Vue components of Spark as much as possible but I discovered I had to implement a certain mail settings so I can't hold it much longer.

Luckily the Spark documentation contains a small cookbook for adding profile fields: https://spark.laravel.com/docs/4.0/adding-profile-fields

Most parts are within my (limited PHP) comfort zone:

First the blade php:

<form class="form-horizontal" role="form">
       <div class="form-group" :class="{'has-error': form.errors.has('mail-settings')}">
         <label class="col-md-4 control-label">Mail settings</label>

         <div class="col-md-6">
           <label class="radio-inline"><input type="radio" value="profile" v-model="form.type" name="profile">Profile</label>
           <label class="radio-inline"><input type="radio" value="website" v-model="form.type" name="website">Website</label>
           <label class="radio-inline"><input type="radio" value="combined" v-model="form.type" name="combined">Combined</label>

           <span class="help-block" v-show="form.errors.has('mail-settings')">
             @{{ form.errors.get('mail-settings') }}
           </span>
         </div>
       </div>

Which is integrated :

<!-- Update Mail settings -->
      @include('settings.profile.update-mail-settings')

So as can be seen in the previous code block, I wish to store the result of 3 radio buttons. However the linked Vue js file is giving my headaches:

Vue.component('update-mail-settings', {
   props: ['user'],

   data() {
       return {
           form: new SparkForm({
               profile: ''
               website: ''
               combined: ''
           })
       };
   },

   mounted() {
       this.form.mailsettings = this.user.mailsettings;
   },

   methods: {
       update() {
           Spark.put('/settings/profile/mail-settings', this.form)
               .then(response => {
                   Bus.$emit('updateUser');
               });
       }
   }
});

But how on earth do I integrate the radio buttons in the SparkForm? Suggestions are most welcome.

0 likes
1 reply
hellomars's avatar
hellomars
OP
Best Answer
Level 1

I found the answer!

data() {
  return {
   form: new SparkForm({
       type: ''    <-  this can now be v-modeled to "form.type"
   })
 };
},

Please or to participate in this conversation.