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

您可以拥有一个数据属性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 }}

Answer 2

我将在单元格上添加“铅笔”图标，这将提示使用现有值的对话框。提交后-在后端发送更新项目的请求，等待回复。如果出错-处理并返回。如果成功-显示public static void main(String[] args) { // TODO Auto-generated method stub char c; do { Scanner s=new Scanner(System.in); try { int size=s.nextInt(); int[] arr=new int[size]; for(int i=0;i<size;i++) { arr[i]=s.nextInt(); } bubblesort(arr); for(int i=0;i<arr.length;i++) { System.out.print(arr[i]+" "); } System.out.println(); } catch(Exception e) { System.out.println("Invalid Input"); } finally { System.out.println("Want to repeat(y/n)"); System.out.println(s); c=s.next().charAt(0); } } while(c=='y' || c=='Y'); }小吃/警报，请在success更新相应的字段。小心反应性警告-事后将其传播或使用this.bloodTestResultsList（有关vue的反应性警告的更多信息：https://vuejs.org/v2/guide/reactivity.html）。

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

2 个答案: