单击编辑按钮后如何使结果列可编辑

Question

每当我点击“编辑”按钮时。我希望 {{ 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;
    }

Answer 1

我会在单元格中添加 'pencil' 图标，这会提示出现现有值的对话框。提交后 - 在后端发送更新项目的请求，等待响应。如果错误 - 句柄和 return。如果成功 - 显示 success snack/alert，请更新 this.bloodTestResultsList 处的相应字段。注意反应性警告 - 之后传播它或使用 Vue.set（更多关于 vue 的反应性警告：https://vuejs.org/v2/guide/reactivity.html）。

Answer 2

您可能有一个数据属性 isEditing，它是一个布尔值。单击编辑按钮时，isEditing 将为真，而当单击 cancel 按钮（或单击任何 button/icon 以停止编辑时，isEditing 将为假。

数据属性将是

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 }}

单击编辑按钮后如何使结果列可编辑

How to make result column editable after clicking edit button

vue.js

bootstrap-4

pug

vuejs2