Vue & Vuex를 사용하여 필드 편집

Vue & Vuex를 사용하여 필드 편집

사용자가 룸 정보를 편집할 수 있는 페이지가 있습니다.예를 들어 강의실 이름입니다.현재 제가 가지고 있는 코드는 다음과 같습니다.roomName순식간에h3그리고 만약 그들이 클릭한다면.edit버튼을 누른 다음 속성을 누릅니다.edittrue로 변경됩니다(그러면 다음이 표시됩니다).text-field대신에h3).

<!-- Room Name -->
<h2 v-if="edit == false">{{ roomName }}</h2>
  <!-- EDIT -->
  <v-text-field
      v-else
      label="Room Name"
      v-model="roomName"
   />

<!--Edit Button-->
<v-btn v-if="edit == false" 
       @click="edit = true" 
       class="filter">Edit</v-btn>

<!--Cancel Button-->
<v-btn v-if="edit == true" 
       @click="cancelEdit" 
       class="filter">Cancel</v-btn>

문제는 다음과 같습니다.사용자가 취소를 누르면 속성을 업데이트하지 않습니다.roomName나는 이것을 다시 실행하여 그것을 잡으려고 합니다.roomName가게에서그러나 계산된 속성을 호출하는 것을 허용하지 않습니다.cancelEdit.

내가 사용하는 이유는roomName부동산 &v-model계산된 속성의 값을 직접 사용하지 않는 것은...를 누르면 입력에서 값을 가져올 수 있는 방법을 이해할 수 없기 때문입니다.save.

입력에서 값을 가져오거나 이 구조로 취소 버튼을 만들려면 어떻게 해야 합니까?

이 스니펫을 확인하여 도움이 될 수 있는지 확인하십시오.

사용하지 않았습니다.vuex그러나 스토어에서 초기 값을 사용할 수 있습니다.

https://jsbin.com/yefiqinewu/edit?html,js,output

언급URL : https://stackoverflow.com/questions/51705147/editing-fields-with-vue-vuex