Vue.js에서 필요한 입력이 하위 구성 요소에서 자동으로 유효성 검사를 트리거하는 이유는?

Vue.js에서 필요한 입력이 하위 구성 요소에서 자동으로 유효성 검사를 트리거하는 이유는?

하위 구성요소에 필요한 입력이 있을 때 유효한 기본값이 없는 입력이 사용자 작업이 수행되지 않았음에도 불구하고 렌더에서 자동으로 잘못된 입력으로 강조 표시된다는 것을 알았다.예상되는 동작은 잘못된 제출 시도가 발생할 때까지 이러한 양식 입력이 강조 표시되지 않는 것이다.

이러한 필수 입력이 루트 Vue 인스턴스에 있는 경우에는 이 문제가 존재하지 않는다.

정확히 왜 이런 일이 일어나는 거지?이것이 버그인가, 아니면 (타사 입력 구성 요소와는 별개로) 내가 간신히 간과해 온 문서화된 해결책이 있는가?

아래는 문제를 증명하는 최소한의 예다.

Vue.component('my-form-component', {
  template: `
    <form>
      <input type="radio" v-model="input_val" name="test" value="0" required/> 0
      <br/>
      <input type="radio" v-model="input_val" name="test" value="0" required/> 1
    </form>
  `,
  data: function() {
    return {
      input_val: ''
    };
  }
});

new Vue({
  el: '#app'
});

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>

<div id="app">
  <my-form-component></my-form-component>
</div>

또한 이 문제는 Firefox를 사용하여 관찰되고 있으며 이전 버전의 브라우저에 존재해왔다.

문제는 bugzilla에서 언급된 Firefox 버그에 의해 발생할 수 있다.특히 JavaScript를 통해 값을 설정할 때 필요한 입력이 조기에 검증되고 있는 것이 문제다.

나는 그 이슈를 Vue의 이슈 트래커에 추가했고 위의 링크를 제공받았다.이 문제가 해결되느냐의 여부는 엣지 케이스를 처리하는 데 Vue의 몫이 되거나, 아니면 모질라가 이 문제를 적절하게 처리하느냐의 몫이 될 것이다.

참조URL: https://stackoverflow.com/questions/47997487/why-do-required-inputs-in-vue-js-seem-to-automatically-trigger-validation-in-chi