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

【问题标题】：How to make result column editable after clicking edit button单击编辑按钮后如何使结果列可编辑
【发布时间】：2020-08-06 08:51:22
【问题描述】：

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

【问题讨论】：

添加带有值的输入字段并将它们隐藏为v-if='edit!=true'。使用按钮切换编辑值
我尝试了类似的方法，但不起作用。返回 { 编辑：假，} b-button.editbtn.d-flex.flex-row.mb-3(@click="edit= true") input.form-control(type="text" v-model=" test.result" v-if="edit = true")
您希望该行中的所有结果都可编辑吗？
只有第二列有数字

标签： vue.js bootstrap-4 vuejs2 pug

【解决方案1】：

您可以有一个数据属性isEditing，它是一个布尔值。单击编辑按钮时，isEditing 将为真，当cancel 按钮（或单击任何按钮/图标以停止编辑时，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 }}

【讨论】：

嗨，@Dave。 this.edit = !this.edit 在您单击时更改 this.edit 的值（这是一个切换 - 值在您单击时更改，从 true 变为 false 或从 false 变为 true，具体取决于当前值）。如果为假，单击将其更改为true，反之亦然。但是，this.edit == !this.edit 会比较 this.edit to !this.edit 的值。它将始终返回 false，因为 true 与 false 不同。 == 或严格相等 (===) 用于比较。你现在明白了吗？

【解决方案2】：

我会在单元格中添加“铅笔”图标，这将提示带有现有值的对话框。提交后 - 发送请求以在后端更新项目，等待响应。如果错误 - 处理并返回。如果成功 - 显示successsnack/alert，更新this.bloodTestResultsList 的相应字段。注意反应性警告 - 事后传播或使用 Vue.set（更多关于 vue 的反应性警告：https://vuejs.org/v2/guide/reactivity.html）。

【讨论】：