HTML 입력에서 vue.js 데이터로 기본값 로드

HTML 입력에서 vue.js 데이터로 기본값 로드

태그 값 로딩이 가능한지 궁금하다.valuevue.js 데이터의 기본값으로 지정하시겠습니까?

와 잘 어울린다.

coupon: $('#coupon').val(),

하지만 나는 jQuery를 정말 사용하고 싶지 않다.

여기서 사용 가능한 코드: https://jsfiddle.net/4a80dnfo/1/

그래서 나는 이 일을 끝낼 방법을 찾아냈다.beforeMount()낚싯바늘을 달다

이 HTML을 가정할 때:

<div id="coupon-code">
    <input ref="coupon" v-model="coupon" value="99PI_ORG" />
</div>

이 Javascript는 이 일을 완수해야 한다.

  new Vue({
    el: '#coupon-code',
    data: {
      coupon: ''
    },
    beforeMount: function() {
      this.coupon = this.$el.querySelector('[ref="coupon"]').value;
    }
    // methods and such here.
  }
});

나는 결국 그 제품을 사용하게 되었다.beforeMount()시험 삼아 실수를 저지르다내가 배운 몇 가지 일들은 관련이 있을 수 있는 일들

• this.$refs에 존재하지 않음created()낚싯바늘을 달다
• this.$refs.coupon.value에 빈 문자열을 반환하다.mounted()낚싯바늘을 달다
• 그ref요소의 속성이 다음보다 먼저 삭제됨mounted()훅, 그러니까 뭐 이런 거.this.$el.querySelector('input[ref=coupon]')효과가 없다.
• 사용할 수 있다this.$el.querySelector('input[data-ref=coupon]').attributes['value'].value안쪽에mounted()그러나 이것은 나에게 사용하는 것보다 더 나쁘게 보인다.beforeMount().

이것을 더 잘 할 수 있는 방법에 대한 제안이 있다면, 나는 피드백에 매우 개방적이다.이 해결책은 여전히 나에게 차선책으로 느껴진다.

jsfiddle에서는 v-model을 사용하고 있으므로data()원하는 값을 설정하기만 하면 된다.

편집: v-bind를 사용하도록 코드 업데이트

new Vue({
	el: '#app',
	data: {
            coupon: 'You value here',
	}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>

<div id="app">
  <input id="coupon" type="text" name="coupon" :value="coupon" />
</div>

<input  name="coupon"  v-model="coupon" value="def val">    

window.app = new Vue({
    el: '#xxx',
    data: {
       coupon: document.querySelector("input[name=coupon]").value
    }
    ...
});

참조URL: https://stackoverflow.com/questions/44738184/load-default-value-from-html-input-to-vue-js-data