https://velog.io/@iepppop/vue3-%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85
등록은 여기서 함

삭제

이런 방법도 있지만 이전에는 api에 idx 번호를 보내면 백에서 삭제가 됐음 아마 그렇게 하지 않을까?

const deleteItem = async (id) => {
      try {
        await axios.delete(`data/${id}`);
      } catch (err) {
        console.error(err);
      }
     loadData()
}

수정

변수 새로 생성해서 값 넣어주고 그 값을 수정하게 ~

      <li v-for="user in userList" :key="user.username">
        <span>{{ user.id }}</span>
        <span>
          {{ user.username }}
          <input v-if="modBtn && user.id === currentIdx" type="text" class="modify-input" v-model="userNameContent"/>
        </span>
        <span>{{ user.email }}
          <input v-if="modBtn && user.id === currentIdx" type="text" class="modify-input" v-model="emailContent"/>
        </span>
        <button v-if="!modBtn" class="delete" @click="modify(user)">modify</button>
        <button v-else class="enter" @click="updateItem(user)">enter</button>
      </li>

const modBtn = ref(false)
const currentIdx = ref(null);
const userNameContent = ref('');
const emailContent = ref('');

const modify = (user) => {
  currentIdx.value = user.id;
  userNameContent.value = user.username;
  emailContent.value = user.email;
  modBtn.value = true;
}

const updateItem = async(user) => {
      try {
        await axios.put(`data/${user.id}`, {
          ...user,
          username: userNameContent.value,
          email: emailContent.value,
        });
      } catch (error) {
        console.error(error);
      }
      
      loadData()
      modBtn.value = false;
}