Clash Royale CLAN TAG#URR8PPP

Editing fields with Vue & Vuex

I have a page where I want a user to be able to edit their room information. For example the name of the room. The code I have currently is that it shows the roomName in an h3 and if they click on the edit button, then the property edit is changed to true (this will then show the text-field instead of the h3).

roomName

h3

edit

edit

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>


The problem is: That if a user presses cancel I don't want it to update the property roomName. I try to do this by rerunning a computed property that grabs the roomName from the store. However I doesn't allow me to call a computed property in cancelEdit.

roomName

roomName

cancelEdit

The reason I'm using a roomName property & v-model, and not directly using the value from the computed property is... because I don't understand how I can grab the value from an input if I press save.

roomName

v-model

save

How can I grab the value from an input or how can I make a cancel button with this structure?

1 Answer
1

Check this snippet to see if it can help you,

I didn't use vuex but you can your initial values from your store:

vuex

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

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.