Vue テクノロジー開発におけるフォーム データの追加、削除、変更、クエリ操作の処理方法

new Vue({
  data() {
    return {
      formData: []
    }
  }
})

<div v-for="item in formData" :key="item.id">
  {{ item.name }}
</div>

<form @submit="addFormData">
  <input type="text" v-model="newName">
  <button type="submit">添加</button>
</form>

methods: {
  addFormData(event) {
    event.preventDefault();
    this.formData.push({
      id: this.formData.length + 1,
      name: this.newName
    });
    this.newName = '';
  }
}

<div v-for="(item, index) in formData" :key="item.id">
  {{ item.name }}
  <button @click="deleteFormData(index)">删除</button>
</div>

methods: {
  deleteFormData(index) {
    this.formData.splice(index, 1);
  }
}

<div v-for="(item, index) in formData" :key="item.id">
  <div v-if="!item.editing">{{ item.name }}</div>
  <div v-else>
    <input type="text" v-model="item.name">
    <button @click="updateFormData(index)">保存</button>
  </div>
  <button @click="editFormData(index)">编辑</button>
</div>

methods: {
  editFormData(index) {
    this.formData[index].editing = true;
  },
  updateFormData(index) {
    this.formData[index].editing = false;
  }
}

<input type="text" v-model="searchKeyword">
<div v-for="item in filteredData" :key="item.id">
  {{ item.name }}
</div>

computed: {
  filteredData() {
    return this.formData.filter(item => item.name.includes(this.searchKeyword));
  }
}