개요

Vue.js를 사용하여 편집 폼에 테이블에서 선택한 줄의 데이터를 표시합니다
표에서 편집한 데이터를 표의 대상 줄로 되돌려 주는 기능을 실현했기 때문에
당시의 필기.

환경

Vue.js 2.6.10

구현 기능 개요

편집 버튼을 누릅니다.

객체 행의 데이터 추출

저장 버튼을 누릅니다.

입력 내용으로 추출된 줄의 데이터를 업데이트합니다.

세부 정보

구현된 코드 예는 다음과 같습니다.
요점은

편집 시작 시 편집 대상의 색인 유지

표를 편집한 데이터와 표 데이터의 대상 참조를 분리하기 위해 Object.assign() 다른 대상으로 데이터 만들기

사용splice(), 편집 객체의 인덱스만 업데이트

내 생각에는 이런 곳이다.

<template>
  <div>
    <div class="detail">
      <label>
        No：
        <input type="number" v-model.number="form.no" />
      </label>
      <label>
        Name：
        <input type="text" v-model="form.name" />
      </label>
      <label>
        Content：
        <input type="text" v-model="form.content" />
      </label>
      <button type="button" @click="onSave">保存</button>
      <button type="button" @click="onCancel">キャンセル</button>
    </div>
    <hr />
    <div class="table">
      <table border="1">
        <thead>
          <tr>
            <th style="width:120px;"></th>
            <th style="width:50px;">No</th>
            <th style="width:150px;">Name</th>
            <th style="width:300px;">Content</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(d,index) in data" :key="index">
            <td>
              <button type="button" @click="onEdit(index)">編集（{{ index + 1 }}行目）</button>
            </td>
            <td>{{ d.no }}</td>
            <td>{{ d.name }}</td>
            <td>{{ d.content }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      data: [
        { no: 1, name: "test1", content: "テスト" },
        { no: 2, name: "test2", content: "なし" },
        { no: 3, name: "test3", content: "～～～～～～～～～" }
      ]
    };
  },
  methods: {
    onSave() {
      this.data.splice(
        this.currentTargetIndex,
        1,
        Object.assign({}, this.form)
      );
      this.form = {};
    },
    onCancel() {
      this.form = {};
    },
    onEdit(index) {
      this.currentTargetIndex = index;
      this.form = Object.assign({}, this.data[index]);
    }
  }
};
</script>

<style>
</style>

총결산

그렇게 복잡한 설치도 아니고, 아마 사용할 곳이 없을 것이다
실제 제작된 기능이라 노트로 남기고 싶어요.
통합 로그인, 여러 데이터 편집 등의 기능을 설치할 때 사용할 수 있습니다.