vue.js - VueJS : Use v-model and :value in the same time

Question

我正在寻找使用 v-model 的方法和 :value同时在同一个物体上。

我收到了这个错误:

:value="user.firstName" conflicts with v-model on the same element because the latter already expands to a value binding internally.

目的是将从 mapGetters 获取的值设置为默认值。 (来自一家商店)并在用户提交修改时设置正确的值。 (在 onSubmit 中)

<div class="form-group m-form__group row">
    <label for="example-text-input" class="col-2 col-form-label">
        {{ $t("firstname") }}
    </label>
    <div class="col-7">
        <input class="form-control m-input" type="text" v-model="firstname" :value="user.firstName">
    </div>
</div>


<script>
import { mapGetters, mapActions } from 'vuex';

export default {
    data () {
        return {
            lang: "",
            firstname: ""
        }
    },
    computed: mapGetters([
        'user'
    ]),
    methods: {
        ...mapActions([
            'updateUserProfile'
        ]),
        onChangeLanguage () {
            this.$i18n.locale = lang;
        },
        // Function called when user click on the "Save changes" btn
        onSubmit () {
            console.log('Component(Profile)::onSaveChanges() - called');
            const userData = {
                firstName: this.firstname
            }
            console.log('Component(Profile)::onSaveChanges() - called', userData);
            //this.updateUserProfile(userData);
        },
        // Function called when user click on the "Cancel" btn
        onCancel () {
            console.log('Component(Profile)::onCancel() - called');
            this.$router.go(-1);
        }
    }
}
</script>

Answer 1

通常你想设置 v-model 的“初始”值。在对象本身上，例如:

data() {
  return {
    firstname: 'someName'
  }
}

但由于您是从商店获取的，您可以使用 this.$store.getters[your_object] 访问特定的 getter 对象。 ，所以我会删除 :value绑定(bind)使用 v-model单独为此:

<div class="col-7">
  <input class="form-control m-input" type="text" v-model="firstname">
</div>

<script>
export default {
  data() {
    return {
      lang: "",

      firstname: this.$store.getters.user.firstName
    }
  },

  // ...
}
</script>