Как принять пропущенные реквизиты, отобразить их в раскрывающемся списке и сохранить их в данных?

Question

Мне нужно несколько советов, и ваши советы будут с благодарностью.

Я пропустил подобные опоры

, поэтому я принял их в свой EditCriminal. vue

        props : ['crimes','criminal','admins','countries'],

Так что я хочу, чтобы поместить эти crimes или тип преступлений там в раскрывающемся массиве и при выборе значения c crime_id и отображении описания преступника также на стороне.

    <div class="w-full flex">
                <label for="name" class="block uppercase tracking-wide text-black-v2 text-xs font-bold mb-2">List all the Crimes
                </label>
                <span>
                    <i class="fas fa-plus-circle h-4 w-4 text-grey-darker" @click="add(k)" v-show="k == inputs.length-1">
                    </i>
                </span>
            </div>

            <div class="w-full flex inline-block" v-for="(input,k) in inputs" :key="k">
                <!-- if there's no crimes for this person -->
                <div v-if="criminal.crimes.length === 0" class="flex inline-block w-full">
                    <select v-model="inputs.crime_id" class="hover:bg-grey-lightest bg-grey-lighter w-full mb-2 p-2 leading-normal">
                        <option v-for="crimes in crimes">{{ crimes.criminal_offense }} </option>
                    </select>
                    <div id="input-group" class="ml-4 w-3/5">           
                        <input type="text" v-model="inputs.name" class="hover:bg-grey-lightest bg-grey-lighter w-full mb-2 p-2 leading-normal" id="pin" name="pin" autocomplete="name" placeholder="Attribute Details" required>
                    </div>
                    <span>
                        <i class="fas fa-minus-circle" @click="remove(k)" v-show="k || ( !k && inputs.length > 1)">
                        </i>
                        <i class="fas fa-plus-circle" @click="add(k)" v-show="k == inputs.length-1">
                        </i>
                    </span>
                </div>
                <div class="w-full inline-block" v-else>
                    <div v-for="crimes in criminal.crimes">
                        <!-- <p>{{ crimes.criminal_offense }} </p> -->
                        <div class="flex inline-block">
                            <select class="hover:bg-grey-lightest bg-grey-lighter w-full mb-2 p-2 leading-normal">
                                <option v-for="crimes in crimes">{{ crimes.criminal_offense }} </option>
                            </select>
                            <div class="flex inline-block">
                                <div id="input-group" class="ml-4 w-3/5">           
                                    <input type="text" class="hover:bg-grey-lightest bg-grey-lighter w-full mb-2 p-2 leading-normal" id="pin" name="pin" autocomplete="name" placeholder="Crime Details" required>
                                </div>
                                <span>
                                    <i class="fas fa-minus-circle" @click="remove(k)" v-show="k || ( !k && inputs.length > 1)">
                                    </i>
                                    <i class="fas fa-plus-circle" @click="add(k)" v-show="k == inputs.length-1">
                                    </i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

, так что это UI

• это в моем объекте данных ..

data(){
    return { 

        inputs: [
        {
            crime_id : 0, 
            name: ''
        }
        ],
        country : this.criminal.country_id,
        form : {
            birthplace : "",
            status : 0, 
            maxFiles: 1,
            complete_description : this.criminal.profile.complete_description,
            currency : 1,
            placeholder:  "Well..",
            alias : "",
            bounty : "",
            last_seen : "",
            contact_person : api.user.id , 
            criminals_name : "",
            // contact_number : api.user.phone_number , 
            contact_number : "",
            attachments : [],
            country_id : 4 , 
            uploadUrl: urls.urlSaveCriminal,
        },
        posted_by : this.criminal.posted_by,
            max_files: { // total # of files allowed to be uploaded
                type: Number,
                required: false,
                default: 10
            }