6

我正在寻找一种在同一对象上同时使用v-model和使用的方法。:value

我收到了这个错误：

:value="user.firstName"v-model与同一元素发生冲突，因为后者已经在内部扩展为值绑定。

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>
4

3 回答 3

3

Vue指令是andv-model的语法糖。这篇 alligator.io 文章帮助我了解了它的工作原理。v-bind:valuev-on:input

所以基本上你的问题是v-model指令设置value为firstname，而你也明确设置value为user.firstName.

有很多方法可以处理这个问题。我认为一个快速而直接的解决方案是firstname将.v-modelv-bind:value

然后，要将商店中的用户设置为默认用户名，您可以在挂钩中设置fristname为商店用户的用户名：created

脚本：

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

export default {
    created() {
      this.firstname = this.user.username; // is this right? no used to the map getters syntax, but this is the idea
    },
    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>
于 2019-03-06T12:30:37.370 回答
3

通常，您希望v-model在对象本身上设置 的“初始”值，例如：

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

但是由于您是从商店获取的，因此您可以使用 访问特定的 getter 对象this.$store.getters[your_object]，因此我将删除:value绑定并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>
于 2019-03-06T12:34:44.730 回答
1

你应该只使用 v-model，它会在你的脚本中创建一个与值的 2 路绑定：在 js 中更改变量将更新输入元素，与输入元素交互将更新变量。

如果您想使用默认值，只需将变量设置为该值（无论它来自何处）。

于 2019-03-06T12:29:34.793 回答