используйте одну и ту же форму для операций создания и чтения

У меня есть мастер и дочерний компонент. Дочерний компонент сохраняет данные как для режима создания, так и для режима редактирования. Дочерний элемент имеет следующий раздел данных, который используется, когда компонент находится в режиме создания.

 data() {
            return {
                title: '',
                description: '',
                organizer: '',
                startdate: '',
                enddate: '',
                email: '',
                phone: ''
            }
        },

и мои входы в режиме создания следующие

<input type="text" placeholder="enter event title here" class="form-control"  v-model="title">

В режиме редактирования я обновляю значение реквизита на клиенте следующим образом:

props:['currentevent']

Значение currentevent передается от главного компонента к дочернему компоненту, а также является значением, которое редактируется в данный момент.

Итак, полный код обработки входного значения выглядит следующим образом

<input type="text" placeholder="enter event title here" class="form-control" v-if="currentevent" :value="currentevent.title">

<input type="text" placeholder="enter event title here" class="form-control" v-else v-model="title">

и в моем методе сохранения (в дочернем компоненте) я проверяю, является ли текущее событие пустым или нет. Если он пуст, я запускаю код добавления, в противном случае я запускаю код обновления.

Вопрос: Это работает, но у меня большая форма, и необходимость делать это для каждого компонента не является чистым дизайном. Не могли бы вы сообщить мне, что я должен делать?


vue.js vuejs2 vue-component
person Gagan    schedule 19.12.2016    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Я полностью ценю ваше затруднительное положение. Лучший способ обработки данных формы — сделать их создание/обновление независимым. Вот что я рекомендую вам попробовать:

Вместо того, чтобы хранить все поля данных как отдельные свойства, держите их в одном объекте, в данном случае я назвал его eventObj для ясности:

data () {
    return {
        eventObj: {}
    }
}

Затем в вашей разметке вы бы ссылались на них через объект:

<input type="text" placeholder="..." class="form-control" v-model="eventObj.title">

Затем вам нужно будет определить опору для передачи данных (как объекта) из родительского компонента, если вы редактируете:

props: {
    currentevent: Object
}

И тогда вам просто нужно сопоставить входящую опору с данными дочернего компонента:

created() {
    Object.assign(this.eventObj, this.currentevent || {})
}

Теперь, когда ваши входы, такие как <input v-model="eventObj.title">, обрабатываются, если есть сохраненный заголовок (который был передан с currentevent), поле будет предварительно заполнено им, в противном случае оно будет пустым.

Я думаю, что это должно помочь вам в правильном направлении к решению сложности, которую вы пытаетесь понять. Есть и другие логистические проблемы, связанные с подобными вещами в целом, но я не буду бубнить. :)

person Rommel Santor    schedule 19.12.2016
comment
Спасибо @rommel .. Это сработало .. еще раз спасибо !! :) - person Gagan; 19.12.2016
comment
@Rommel Santor, кажется, ты осваиваешь vue.js. Мне нужна ваша помощь. Посмотрите здесь: stackoverflow .com/questions/41843823/ - person moses toh; 25.01.2017

arrow_upward
0
arrow_downward

Проблема, которую я вижу, заключается в том, что вы хотите удалить v-if/else в форме. Я рекомендую, чтобы ваши локальные данные ребенка были синхронизированы с переданными реквизитами и использовали только локальную переменную в форме.

Один из способов сделать это — поместить наблюдателя в пропсы и всякий раз, когда пропсы изменяются, обновлять локальные переменные и использовать только эти переменные в форме.

watch: {
   currentevent: function(newVal){
      title =  newVal.title,\
      description = newVal.description
      ...
   }
}
person Saurabh    schedule 19.12.2016