Я надеюсь, что кто-то из вас может прочитать мой код crimes и criminal значение, на самом деле есть реквизиты, я просто разделил их, чтобы я мог просто показать их значения ..
Моя цель состоит в том, чтобы выделите все преступления в значении опции и поместите их соответствующие описания преступлений в текстовое поле рядом с ним так же, как это
Это мой код ..
<div v-if="input.crimes.length">
<div v-for="(crime, index) in input.crimes" :key="index">
<div class="flex w-full inline-block">
<select class="hover:bg-grey-lightest bg-grey-lighter w-full mb-2 p-2 leading-normal w-1/5" v-model="crime.id">
<option class="hover:bg-grey-lightest bg-grey-lighter w-full mb-2 p-2 leading-normal" v-for="option in crimeTypes" :value="option.id" :key="option.id">{{ option.criminal_offense }}</option>
</select>
<input class="hover:bg-grey-lightest bg-grey-lightest w-full mb-2 p-2 leading-normal w-1/3" type="text" v-model="crime.comment"/>
<span class="ml-2"><button @click="$delete(input.crimes, index)"><i class="fas fa-minus-circle"></i></button></span>
</div>
</div>
<!-- <input type="text" v-model="crime.description"> -->
</div>
<!-- if there is none then just display the textbox -->
<div v-else>
<h3>There are no crimes for this guy</h3>
</div>
Это данные, которые я использовал
data(){
return {
input: {
crimes : this.criminal.crimes,
}
},
methods :{
addNewCrime() {
this.input.crimes.push({ id: 1, description : "Lorem ipsum dolor sit amet." });
},
},
computed : {
crimeTypes(){ return this.crimes }
},
Это значения, которые у меня есть в моем vue экземпляре. Я только что разделил эти два, потому что это более компактно - просто отделить их от экземпляра vue. Значение crimeTypes точно такое же, как и значение преступлений здесь. они очень важны
crimes:
[{"criminal_offense":"Kidnapping"},{"criminal_offense":"Armed Robbery"},{"criminal_offense":"Arson"},{"criminal_offense":"Drug Trafficking"},{"criminal_offense":"Terrorism"},{"criminal_offense":"Extortion"},{"criminal_offense":"Human Trafficking"}]
criminal:
{"id":1,"full_name":"Sadye Walker","alias":"Gunner","first_name":"Sadye","middle_name":"Rau","last_name":"Walker","created_at":"2019-08-20 19:44:34","updated_at":"2019-08-20 19:44:34","status":"1","posted_by":1,"photo":"1577724169.jpeg","country_id":388,"contact_number":"911","profile":{"criminal_id":1,"birthplace":"19225 Grayce Ville\nNew Mitchel, GA 69927-8941","country_last_seen":400,"birthdate":"1983-05-09 00:00:00","last_seen":"58159 Thomas Hollow\nEast Vidaview, UT 43803-2557","eye_color":"gray","weight_in_kilos":"60","height_in_feet_and_inches":"5'8","country_of_origin":"862","body_frame":"skinny","bounty":"7269.39","created_at":"2019-08-22 04:39:48","updated_at":"2019-08-22 04:39:48","complete_description":"Fill all description of the criminal that are not listed above such as :1. Height : 2. Weight3. Eye Color4. Body Frame5. Any other details","currency":"TTD"},"country":{"id":388,"capital":"Kingston","citizenship":"Jamaican","country_code":"388","currency":"Jamaica dollar","currency_code":"JMD","currency_sub_unit":"cent","currency_symbol":"$","currency_decimals":2,"full_name":"Jamaica","iso_3166_2":"JM","iso_3166_3":"JAM","name":"Jamaica","region_code":"019","sub_region_code":"029","eea":0,"calling_code":"1","flag":"JM.png"},"crimes":[{"id":2,"criminal_offense":"Armed Robbery","description":"I should like to have it explained,' said the Mock Turtle. 'She can't explain it,' said.","pivot":{"criminal_id":1,"crime_id":2,"crime_description":"Dicta consequuntur voluptas porro et veniam ut culpa eos dolorem."}},{"id":4,"criminal_offense":"Drug Trafficking","description":"The Dormouse again took a minute or two to think about stopping herself before she found.","pivot":{"criminal_id":1,"crime_id":4,"crime_description":"Explicabo et et quam et est accusantium sit sed omnis."}}]}
Это нормально, так как количество значений здесь корректно .. для этих Speci c преступник у него есть 2 преступления.
Обновления ... [здесь]
Я уже понял это прямо здесь поскольку эти два преступления уже были правильно выделены, но значения в этих полях выбора повторяются, поэтому значения этих двух одинаковы ... Это повторяется.
Я использовал это так
<div v-if="input.crimes.length">
<div v-for="(crime, index) in input.crimes" :key="index">
<div class="flex w-full inline-block">
<select class="hover:bg-grey-lightest bg-grey-lighter w-full mb-2 p-2 leading-normal w-1/3">
<option class="hover:bg-grey-lightest bg-grey-lighter w-full mb-2 p-2 leading-normal" v-for="(option,index) in crimeTypes" :value="crime.id" :key="">
{{ option.criminal_offense }}
</option>
</select>
<input class="hover:bg-grey-lightest bg-grey-lightest w-full mb-2 p-2 leading-normal w-1/2" type="text" v-model="crime.description"/>
<span class="ml-2"><button @click="$delete(input.crimes, index)"><i class="fas fa-minus-circle"></i></button></span>
</div>
</div>
<!-- <input type="text" v-model="crime.description"> -->
</div>
<!-- if there is none then just display the textbox -->
<div v-else>
<h3>There are no crimes for this guy</h3>
</div>
<span>
<button class="bg-blue-dark text-white p-3 mb-2" @click.prevent.stop="addNewCrime()">Add new Crime
</button>
</span>