Как использовать один и тот же реквизит для разных полей select отдельно в vue js - PullRequest
Новая
       50

Как использовать один и тот же реквизит для разных полей select отдельно в vue js

0 голосов
/ 29 октября 2019

У меня есть компонент vue, в котором я использую один объект (объект) в нескольких полях выбора

Внутри полей выбора я изменяю некоторые данные, которые связаны с v-моделью отдельно, но всякий раз, когда я изменяю данные вэто отражается и в других областях. Как остановить этот реактивный характер. 

<div class="col-xs-12" v-for="day in parseInt(location.days)" :key="day">
  Day {{day}}-{{preselect(day,defaultt,location.id,place)}}
  <v-select 
    v-model="days[day]"  
    name="addplaceloc"                     
    label="title" @input="addtoplaces(day,location.id)"                      
    :value="defaultt" :options="place"  multiple  />

    <div  v-for="(placeinfo, index) in objj[location.id]['day-'+day]['place']">
      Place: {{placeinfo['title']}}:{{objj[location.id]['day-'+day]['place'][index]['id']}}-->{{index}}->{{day}}

      <label>From:</label>
      <input type="text" v-model="objj[location.id]['day-'+day]['place'][index]['from_time']" >

      <label>To:</label>
      <input type="text" v-model="objj[location.id]['day-'+day]['place'][index]['to_time']">

      <label>Remark:</label>
      <input type="text" v-model="objj[location.id]['day-'+day]['place'][index]['remark']">
      <button @click="run"> yess</button>
    </div>
</div>

В приведенном выше коде у меня есть несколько городов с несколькими днями с несколькими местами, выбранными в конкретный день.

например, город А есть2 дня.

день 1 Я выбрал место 1, а в день 2 я выбрал одно и то же место 1.

Каждый день у нас есть 3 поля: to_time, from_time, примечание для каждого выбранного местав тот день. Теперь, когда я меняю день 1 на время, оно отражается на день 2. введите описание изображения здесь

1 Ответ

1 голос
/ 29 октября 2019

Прежде всего, компоненты не должны обновлять реквизиты.

См .: https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

Они должны копировать их во время инициализации и обновлять копии.

Затем, возможно, при каком-либо действии, таком как нажатие кнопки «Сохранить» или размытие, компонент должен выдавать данные как часть события - скажем, «ввод» или «изменение».

См .: https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components

Редактировать - После добавления кода и изображения:

Вы должны правильно настроить свои структуры данных. Кроме того, я рекомендую хранить ваши «основные данные» отдельно от данных вашего экземпляра.

Список городов является основными данными. Список мест является основными данными. Вы держите их отдельно. Вы можете сохранить отдельный объект, отображающий детали вместе в нечто вроде сущности TripSchedule.

Например:

Один график или план поездки => 

{
   city_id1: {
       date1_ddmmyyyy: [place_id1a, placeid1b],
       date2_ddmmyyyy: [place_id1c, placeid1d]
   },
   city_id2: {
       date3_ddmmyyyy: [place_id2a, placeid2b]
   }
}

Или,даже лучше .. 

{
   date1_ddmmyyyy:[
       {city: city_id1, place: place_id1a},
       {city: city_id1, place: place_id1b}
   ],date2_ddmmyyyy:[
       {city: city_id1, place: place_id1c}
   ],
   date3_ddmmyyyy:[
       {city: city_id2, place: place_id2a},
       {city: city_id2, place: place_id2b}
   ]
}

Так что, в принципе, не храните план поездки в городе или месте.

...