为什么 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 来适当地处理问题。