VueJS: использовать v-модель и: значение одновременно - PullRequest
Новая
       16

VueJS: использовать v-модель и: значение одновременно

0 голосов
/ 06 марта 2019

Я ищу способ одновременно использовать 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>

Ответы [ 3 ]

2 голосов
/ 06 марта 2019

Обычно вы хотите установить «начальное» значение 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>
1 голос
/ 06 марта 2019

Вы должны использовать только v-модель, она создаст двустороннюю привязку со значением в вашем скрипте: изменение переменной в js обновит элемент ввода, взаимодействие с элементом ввода обновит переменную.

Если вы хотите использовать значение по умолчанию, просто установите переменную на это значение (откуда бы оно ни исходило).

0 голосов
/ 06 марта 2019

Директива Vue v-model является синтаксическим сахаром над v-bind:value и v-on:input. Эта статья alligator.io очень помогла мне понять, как она работает.

Итак, в основном ваша проблема в том, что директива v-model устанавливает value на firstname, пока вы 'Также явно установите value в user.firstName.

Существует много способов решения этой проблемы.Я думаю, что быстрое и простое решение состоит в том, чтобы сохранить firstname в качестве переменной данных (как вы уже делаете), а затем использовать только v-model с ней, не учитывая v-bind:value.

Тогда,чтобы установить пользователя из хранилища для имени пользователя по умолчанию, вы можете установить fristname в качестве имени пользователя хранилища в created hook:

script: 

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