vue.js - 为什么 Vue.js 中的必需输入似乎会自动触发子组件中的验证？

Question

我注意到，当子组件中存在必需的输入时，没有有效默认值的输入会在渲染时自动突出显示为不正确，尽管没有发生用户操作。预期的行为是在发生无效提交尝试之前不会突出显示这些表单输入。

如果这些必需的输入存在于根 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 时被观察到，并且已经存在于以前版本的浏览器中。

Answer 1

问题可能是由 bugzilla 中指出的 Firefox 错误引起的.具体而言，问题在于当通过 JavaScript 设置值时，所需的输入会过早地得到验证。

我已将该问题添加到 Vue 的问题跟踪器中，并提供了上述链接。这个问题最终是否得到解决将取决于 Vue 处理边缘情况，或者 Mozilla 适本地处理这个问题。