기존 값이 있는 Vue 형식 입력 바인딩

기존 값이 있는 Vue 형식 입력 바인딩

입력을 모델에 바인딩하고 싶다.페이지가 로드되면 입력에 값이 지정됩니다.그러나 모델과 바인드하면 늘 또는 빈 값으로 모델을 초기화하면 빈 값이 됩니다.

<div id="update-email">
  <input type="text" name="email" value="me@example.com" v-model="email">
  {{ email }}
</div>

JavaScript:

new Vue({
    el: '#update-email',
  data() {
    return {
      email: '',
    };
  }
});

jsfiddle:https://jsfiddle.net/Debiprasad/v8wyj2kw/

업데이트 방법email값이 로드될 때 입력 값과 일치합니까?

모델 값을 입력 필드 값으로 초기화하여 처리합니다.이렇게 하면 vue가 처음에 입력 필드에 모델 값을 설정할 때 입력 필드에 있던 값이 됩니다.

jquery를 사용한 예는 다음과 같습니다.

 <div id="update-email">
   <input id="email" type="text" name="email" value="me@example.com" v-model="email">
    {{ email }}
 </div>

자바스크립트:

new Vue({
el: '#update-email',
   data() {
     return {
       email: $('#email').val(),
     };
   }
 });

질문 없이 하고 싶다면, 그냥 변경해 주세요.$('#email').val()로.document.getElementById('email').value

디렉티브를 사용하여 값을 요소에 삽입하고 입력 이벤트를 발행할 수 있습니다.

new Vue({
  el: '#update-email',
  data: {
    email: null
  },
  directives: {
    init: {
      bind(el) {
        el.value = el.getAttribute('value');
        el.dispatchEvent(new Event('input'));
      }
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="update-email">
  <input v-init type="text" name="email" value="me@example.com" v-model="email"> {{ email }}
</div>

Ron C의 답변에 JQuery 이외의 변형을 추가하고 링크된 링크에서 제시된 답변을 명확하게 하기 위해 Vue.js의 작성자가 제안한 솔루션을 다음에 제시합니다.

https://jsfiddle.net/vzns7us7/

템플릿:

<script>
// rendered by server
window.__FORM__ = {
  fill: 'my_default_value'
}
</script>

<div id="test">
  <input type="text" v-model="fill">
  {{ fill }}
</div>

JavaScript:

new Vue({
    el: '#test',
    data () {
        return window.__FORM__ || {
          fill: 'none'
        }
    }
});

론의 답변과 yuriy636의 코멘트는 당신의 질문에 완벽하게 답하고 있습니다.Vuex(https://vuex.vuejs.org/en/)를 사용한 고급 솔루션만으로 보완할 수 있습니다.

const store = new Vuex.Store({
  state: {
    email: 'me@example.com'
  }
})
new Vue({
  el: '#update-email',
  store,
  created() {
    this.email = this.$store.state.email
  },
  data() {
    return {
      email: '',
    };
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.4.0/vuex.min.js"></script>

<div id="update-email">
  <input type="text" name="email" v-model="email"> {{ email }}
</div>

언급URL : https://stackoverflow.com/questions/46254621/vue-form-input-bindings-with-existing-value