issue with multiselect default Value about craftable

[mzanier]

i also tried now a different approach using relations for some simple static dropdown values

and basicly ended up with this approach:

    public function edit(ServiceFall $serviceFall)
    {
        $this->authorize('admin.service-fall.edit', $serviceFall);

        $serviceFall->load('ServiceStatus');

        return view('admin.service-fall.edit', [
            'serviceFall' => $serviceFall,
            'ServiceStatusList'=> ServiceStatus::getRows()
        ]);
    }

having a hasOne relationship to

  public function ServiceStatus(){
        return $this->hasOne(ServiceStatus::class,'id','service_status_id');
    }

class ServiceStatus extends Model
{
    use \Sushi\Sushi;

    static function getRows()
    {
        return [
            ['id' => 1, 'name' => 'admin 1'],
            ['id' => 2, 'name' => 'admin 2'],
            ['id' => 3, 'name' => 'admin 3'],
            ['id' => 4, 'name' => 'admin 4'],
            ['id' => 5, 'name' => 'admin 5'],
            ['id' => 6, 'name' => 'admin 6'],
            ['id' => 7, 'name' => 'admin 7'],
        ];
    }
}

and i also added the props etc to the forms.js

Vue.component('service-fall-form', {
    mixins: [AppForm],
    props: [
      'ServiceStatusList'
    ],
    data: function() {
        return {
            form: {
              ServiceShortDescription:  '' ,
               ServiceLongDescription:  '' ,
               service_status_id:  '' ,
               ServiceCreatedByUser:  '' ,

            },
            mediaCollections: ['gallery']
        }
    }
});

template:

{{ $serviceFall->ServiceStatus}}

<div class="form-group row align-items-center" :class="{'has-danger': errors.has('ServiceStatus'), 'has-success': fields.ServiceStatus && fields.ServiceStatus.valid }">
    <label for="roles" class="col-form-label text-md-right" :class="isFormLocalized ? 'col-md-4' : 'col-md-2'">{{ trans('admin.admin-user.columns.roles') }}</label>
    <div :class="isFormLocalized ? 'col-md-4' : 'col-md-9 col-xl-8'">
        <multiselect v-model="form.ServiceStatus" placeholder="{{ trans('brackets/admin-ui::admin.forms.select_options') }}" label="name" track-by="id" :options="{{ json_encode($ServiceStatusList) }}" :multiple="false" open-direction="bottom"></multiselect>
        <div v-if="errors.has('ServiceStatus')" class="form-control-feedback form-text" v-cloak>@{{ errors.first('ServiceStatus') }}</div>
    </div>
</div>

i see that ServiceStatus getting properly set by my load method to for example {"id":5,"name":"admin 5"}
but still, its not selecting this value as default from the multiselect :/

[timoransky]

Hi @mzanier 👋

You can preselect multiselect by prefilling v-model value. In your code, if I understand correctly, you use v-model="form.ServiceStatus" for multiselect so something like this should work:

Vue.component('service-fall-form', {
    mixins: [AppForm],
    props: [
      'ServiceStatusList',
      'serviceFall'
    ],
    data: function() {
        return {
            form: {
               ServiceShortDescription:  '' ,
               ServiceLongDescription:  '' ,
               service_status_id:  '' ,
               ServiceCreatedByUser:  '' ,
               ServiceStatus: serviceFall.ServiceStatus.id
            },
            mediaCollections: ['gallery']
        }
    }
});

Notice I added serviceFall to props and added ServiceStatus to form attribute with a default value. Notice that serviceFall.ServiceStatus.id might not work out of the box, since I'm not familiar with your code that well, but the point is you can use whatever value you want, you can even pass it from controller.

Please let me know if this helped you or not 🤗