V-Modell überschreiben Eingangswert in VueJS

Question

Ich habe diesen Eingang

<input type="text" :value="user.firstName" v-model="userInfo.firstName"> 

, die in einer Komponente edit.vue ist.

In users.vue habe ich Router Link

<router-link :to="'/users/edit-user/'+user.id"><a>Edit</a></router-link> 

und wenn ich auf sie nimmt mich auf bearbeiten Komponente mit der ID des aktuellen Benutzers auf URL.

Das Problem ist, dass, wenn ich diese v-model="userInfo.firstName" in diesem ersten Eingang setzt überschreibt die Daten, die ich bringe, um es zu bearbeiten, den Namen.

Wenn ich diese v-model="userInfo.firstName" von diesem Eingang löschen kann ich den tatsächlichen Wert der Eingabe sehen, die aus der Datenbank kommt, ich meine den tatsächlichen Namen.

Ich brauche dieses v-Modell, in dieser Bearbeitungsseite, um den neuen Eingabewert zu übernehmen und zurück an die Datenbank zu senden.

In einer normalen Bearbeitung, wenn Sie auf Bearbeiten klicken, nehmen Sie an, die tatsächlichen Daten zu sehen, um es zu bearbeiten, nicht eine leere Eingabe.

Warum also v-model den Wert user.name überschreibt (der von einem json-Benutzer stammt, aus der Datenbank) und was kann ich tun, um den tatsächlichen Wert zu sehen und den geänderten Wert in die Datenbank zu senden?

Answer 1

Ich empfehle Ihnen Vuex für diesen Fall zu verwenden. Wie Fatman in seiner Antwort sagte, überschreibt v-model die Value-Eigenschaft.

Dies ist mein Rat, wie Sie die Bearbeitung tun sollten. Ich schreibe es schnell, also ist es nicht perfekt. Lerne Vuex und mache es besser.

User.vue

<p>{‌{user.firstName}}</p> 
<p>{‌{user.lastName}}</p> 
<router-link :to="'/users/edit-user/'+user.rid"><a >Edit user</a></router-link> 

EditUser.vue

<input type="text" v-model="user.firstName"> 
<input type="text" v-model="user.lastName"> 

computed: { 
     user() { 
      return clone(this.$store.state.currentUser); 
     } 
    }, 
methods: { 
     getTheUser() { 
      axios.get("/user/" + this.$route.params.id) 
      .then((response) => { 
       //this.user = response.data; 
       this.$store.commit('setCurrentUser', response.data); 
      }) 
      .catch(function (res) { 
       this.$store.commit('clearCurrentUser'); 
      });  }, 
    updateUser() { 
     // check how you get the token and replace it down here 
     axios.put('/user/' + this.$route.params.id, this.user, 
      {'headers':{'X-AUTH-TOKEN':localStorage.token}}, 
      {'headers':{'Content-Type': 'application/json'}}) 
     .then((response) => { 
      this.$store.commit('setCurrentUser', this.user); 

     }) 
     .catch((response) => { 
      console.log('error answer', response) 

     }) 
     } 
    } 

store.js

import Vue from 'vue'; 
import Vuex from 'vuex'; 
Vue.use(Vuex); 
export default new Vuex.Store({ 
    state: { 
    currentUser: {} 
    }, 
    mutations: { 
    setCurrentUser: function (state, users) { 
     state.currentUser = users; 
    }, 
    clearCurrentUser: function (state) { 
     state.currentUser = {}; 
    }, 
    } 
}) 

In main.js

import store from './store.js'; 

    new Vue({ 
    el: '#app', 
    store, 
    template: '<App/>', 
    components: { App } 
    }) 

Answer 2

v-model überschreibt die value -Eigenschaft, sodass Sie nicht beide für dieselbe Komponente verwenden können. Sie sollten nur v-Modell verwenden und einfach eingestellt userInfo.name = user.name wenn die Komponente erstellt wird:

created(){ 
this.userInfo.name = this.user.name 
}