在VueJS

Question

V型覆蓋輸入值I有這個輸入

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

即在組件edit.vue。

在users.vue我有路由器鏈路

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

，當我點擊它需要我的編輯組件與URL實際用戶的ID。

問題是，如果我把這個v-model="userInfo.firstName"放在那個第一個輸入中，就會覆蓋我帶來編輯它的數據的名字。

如果我從該輸入中刪除這個v-model="userInfo.firstName"，我可以看到來自數據庫的輸入的實際值，我的意思是實際名稱。

我需要這個V模型，在該編輯頁面中，獲取新的輸入值並將其發送回數據庫。

在正常的編輯中，當你點擊編輯按鈕時，你會看到實際的數據來編輯它，而不是空的輸入。因此，爲什麼v-model會覆蓋user.name值（來自json用戶，來自數據庫）以及我能做些什麼來查看實際值並能夠將修改後的值輸入發送到數據庫中？

Answer 1

：你應該只使用V模型和剛剛成立userInfo.name = user.name創建組件時。就像Fatman在他的答案v模型中所說的覆蓋價值屬性。

這是我的建議，你應該怎麼做編輯。我寫得很快，所以它不完美。學習vuex並使其更好。

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 = {}; 
    }, 
    } 
}) 

在main.js

import store from './store.js'; 

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

Answer 2

v-model覆蓋value屬性，因此您不能在同一個組件上使用兩者。我建議你使用Vuex這種情況

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