Vue 3 양식에 바인딩한 데이터가 함수를 통해 콘솔에 인쇄될 때 업데이트되지 않는 이유는 무엇입니까?
<p>Vue 3에서 양식 구성 요소를 만들었으며 양방향 바인딩에 대한 이해와 Vue가 이전 작업에서 예상했던 방식을 바탕으로 참조 개체를 입력 요소에 바인딩하려고 합니다. 모든 변경 사항은 "onChange" 반응 이벤트를 트리거하여 React 구성 요소와 관련된 조작 없이 직접 개체에 대한 참조에 영향을 미칩니다. </p>
<p>그러나 참조된 개체를 출력하는 함수를 실행하기 위해 "저장" 버튼을 클릭하면 원래 로드된 값만 유지되고 입력에서 변경한 내용은 유지되지 않는 것 같습니다. 누구든지 이유를 설명할 수 있나요? </p>
<p>이것은 내 구성 요소의 코드입니다. 팝업 창에 로드됩니다.</p>
<pre class="brush:php;toolbar:false;"><스크립트 설정 lang="ts">
'@/models/activity'에서 가져오기 유형 { 활동 };
"vue"에서 { ref } 가져오기;;
'../../common/Button.vue'에서 버튼 가져오기;
정의Emits([
"닫힌 형식"
]);
const props = 정의Props<{
제목?: 문자열,
활동?: 활동,
editMode: 부울
}>();
constinitialState=props.activity?? {
ID: '',
제목: '',
범주: '',
설명: '',
날짜: '',
도시: '',
장소: ''
}
const currActivity = ref<Activity>(initialState);
const handlerSubmit = () => {
console.log(currActivity.value);
}
// const handlerInputChange = (이벤트: 이벤트) => {
// const {name, value} = event.target as HTMLInputElement;
// console.log(이름, 값);
// // currActivity.value[이름] = 값;
// }
</스크립트>
<템플릿>
<양식
class="그리드 그리드-열-5 간격-4MB-8"
@submit="handleSubmit"
자동완성="해제"
>
모든 응답(1)나는 대답할 것이다
P粉6098665332023-09-05 10:34:30
양방향 바인딩에는 v-model 而不是 :value를 사용해야 합니다.
으아악
회신하다
0
