VueJ: v-model과 :value를 동시에 사용

VueJ: v-model과 :value를 동시에 사용

사용할 방법을 찾고 있습니다.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>

통상, 다음의 「초기」값을 설정합니다.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>

더뷰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후크:

스크립트:

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

v-model만 사용해야 합니다. 스크립트의 값을 사용하여 양방향 바인딩을 생성합니다. js에서 변수를 변경하면 입력 요소가 업데이트되고 입력 요소와 상호 작용하면 변수가 업데이트됩니다.

기본값을 사용하려면 변수를 해당 값(어디서나)으로 설정하십시오.

언급URL : https://stackoverflow.com/questions/55022705/vuejs-use-v-model-and-value-in-the-same-time