在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 
}