ID에 기본값이 없는 페이지를 수정하는 vue 오류를 해결하는 방법은 무엇입니까?

Vue는 개발자가 대화형 웹 애플리케이션을 보다 효율적으로 구축할 수 있게 해주는 프런트 엔드 개발 프레임워크입니다. 하지만 Vue로 개발을 하다 보면 가끔 문제가 발생하는 경우가 있습니다.

그 중 하나는 페이지의 데이터를 수정할 때 ID에 기본값이 없다는 오류가 발생한다는 것입니다. 이 오류는 실제로 수정하기 쉬우며 이 문서에서는 수정 방법을 자세히 설명합니다.

먼저 이 오류의 구체적인 징후를 살펴보겠습니다. Vue에서는 v-model을 사용하여 데이터를 바인딩할 때 데이터를 수정하는 것이 매우 일반적인 작업입니다. 예:

<template>
  <div>
    <input v-model="name">
    <button @click="save">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    }
  },
  methods: {
    save() {
      // 发送请求保存数据
    }
  }
}
</script>

이 코드는 매우 간단합니다. v-model을 통해 변수 이름을 바인딩하고 이를 입력 요소에 바인딩합니다. 입력 상자에 내용을 입력하면 이름 값도 변경됩니다. "저장" 버튼을 클릭하면 수정된 데이터를 저장하라는 요청을 서버에 보냅니다.

그러나 네트워크 요청을 보기 위해 콘솔을 열면 오류 메시지가 표시됩니다.

SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'id' cannot be null

이 오류 메시지는 서버에 요청을 보냈을 때 서버가 데이터베이스 무결성 제약 조건 위반 오류를 보고했음을 알려줍니다. 구체적으로, 서버가 id 값을 전달하라고 요청했는데 요청을 보낼 때 이를 전달하지 않아 서버가 오류를 반환했습니다.

그럼 이런 오류는 왜 발생하는 걸까요? 이 오류의 근본 원인은 v-model을 사용하여 바인딩된 데이터에 기본적으로 id 필드가 포함되어 있지 않기 때문입니다. 이 예에서는 이름 필드만 바인딩하고 ID 필드는 바인딩하지 않았습니다.

이 문제를 해결하려면 다음 두 가지 작업을 수행해야 합니다.

1. 데이터 모델에 id 필드를 추가합니다.
2. 숨겨진 id 필드를 양식에 추가합니다. 이 필드의 값은 반환된 데이터에서 얻을 수 있습니다. 서버 데이터를 수정할 때 id 값을 서버에 전달할 수 있도록 가져옵니다.

이제 이 두 단계를 구현하는 방법을 살펴보겠습니다.

먼저 데이터 모델에 id 필드를 추가해야 합니다. 다음과 같이 Vue의 데이터에 id 필드를 추가합니다:

data() {
  return {
    id: null, // 默认值为null，因为在创建新对象时可能还没有id
    name: ''
  }
}

그런 다음 숨겨진 id 필드를 양식에 추가합니다:

<template>
  <div>
    <input v-model="name">
    <input type="hidden" v-model="id">
    <button @click="save">保存</button>
  </div>
</template>

id 필드에 type="hidden"을 설정하여 표시되지 않도록 합니다. 그 페이지. 요청을 보낼 때 id 값이 서버에 전달될 수 있도록 id 필드의 값을 숨겨진 입력 요소에 바인딩합니다.

이제 저장 방법을 수정하고 id 값도 서버에 전달해 보겠습니다.

save() {
  // 发送请求保存数据
  const data = {
    id: this.id,
    name: this.name
  }
  axios.post('/api/save', data).then(response => {
    // 处理成功
  }).catch(error => {
    // 处理失败
  })
}

이제 이 문제를 성공적으로 해결했습니다. 데이터를 정상적으로 수정할 수 있으며 더 이상 ID에 기본값이 없다는 오류가 발생하지 않습니다.

요약하자면, Vue 프레임워크를 개발에 사용할 때 가끔 이상한 오류가 발생합니다. 이 글에서는 데이터를 저장하는 동안 발생하는 ID에 기본값이 없습니다 오류를 해결하는 방법을 배웠습니다. 이 오류의 근본 원인은 데이터 모델에서 id 필드를 정의하지 않았기 때문이라는 것을 알았습니다. id 필드를 추가하고 이를 숨겨진 입력 요소에 바인딩하여 이 문제를 해결할 수 있었습니다.

위 내용은 ID에 기본값이 없는 페이지를 수정하는 vue 오류를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!