Как сделать столбец результатов доступным для редактирования после нажатия кнопки редактирования - PullRequest
Новая
       168

Как сделать столбец результатов доступным для редактирования после нажатия кнопки редактирования

0 голосов
/ 06 августа 2020

Каждый раз, когда я нажимаю кнопку «Изменить». Я хочу, чтобы вывод в столбце {{test.result}} можно было изменять, я хочу, чтобы он превратился в элемент ввода, чтобы он позволял мне обновлять числа и сохранять их. Прилагаю скриншот того, как выглядит столбец. введите описание изображения здесь 

b-button.d-flex.flex-row 
  p.mb-0 Edit
    i.fas.fa-edit.ml-4.mb-0

.measurement(v-for="test in bloodTestResultChanges")
                  .row.success
                    .col-md-3 {{ test.name }}
                    .col-md-3
                      span.value
                        | {{ test.result }}
                        span(v-if="test.alert_low || test.alert_high || test.alarm_low || test.alarm_high"  v-b-tooltip.hover :title="test.alert")
                          b-icon.ml-2(icon="exclamation-circle" variant="danger")
                        span(v-if="test.previous_result" :id="`tooltip-target-${test.id}`") ({{ test.result - test.previous_result }})
                        b-tooltip(:target="`tooltip-target-${test.id}`" triggers="hover")
                          | Data badania 
                          b {{ $moment(test.previous_date).format("dddd DD MMMM") }}
                    .col-md-3
                      span.unit {{ test.unit }}
                    .col-md-3 
                       p {{ test.result }}

 bloodTestResultChanges() {
      let results = _.chain(this.bloodTestResultsList)
        .groupBy("blood_test_type_id")
        .map((tests, key) => {
          let latestResult = _.head(tests);
          let previousResult = _.chain(tests)
            .tail()
            .head()
            .value();

          if(previousResult) {
            latestResult.previous_result = previousResult.result;
            latestResult.previous_date = previousResult.date;
            
          }
            
            return latestResult;

        })
        .value();

        return results;
    }

Ответы [ 2 ]

1 голос
/ 06 августа 2020

У вас может быть свойство данных isEditing, которое будет логическим. При нажатии кнопки редактирования isEditing будет истинным, а при нажатии кнопки cancel (или любой другой кнопки / значка, чтобы остановить редактирование, isEditing будет ложным.

Свойство data будет быть 

data() {
  return {
   isEditing: false // by default, when that component loads, the isEditing property will be false
  }
}

.measurement(v-for="test in bloodTestResultChanges")
  .row.success
    .....
    .col-md-3
      span.value v-if="!isEditing" // hide the span when the edit button is clicked and show it when there's no editing
        | {{ test.result }}
       ....
      <input v-model="test.result" v-if="isEditing">// when edit button is clicked, you want the input to have the test.result value for a greater UX.
    .col-md-3
      span.unit {{ test.unit }}
    .col-md-3 
       p {{ test.result }}
0 голосов
/ 06 августа 2020

Я бы добавил в ячейку значок карандаша, который будет вызывать диалог с существующим значением. После отправки - отправить запрос на обновление элемента в бэкэнде, дождаться ответа. Если ошибка - обработать и вернуть. В случае успеха - показать success снек / оповещение, обновить соответствующее поле на this.bloodTestResultsList. Позаботьтесь о предупреждении о реактивности - распространите его позже или используйте Vue.set (подробнее о предупреждениях о реактивности vue: https://vuejs.org/v2/guide/reactivity.html).

...