Vue.js |如何访问字段：脚本标签中的类型属性

Question

<div class="row">
  <ValidationProvider v-slot="{errors, valid}" rules="required" class="col-md-6">
    <b-field :label="$t('admin_global_username')" :type="{'is-success':valid, 'is-danger': errors[0]}" :message="errors && $t(errors[0])">
      <b-input v-model="employeeModal.modalData.username" type="text" />
    </b-field>
  </ValidationProvider>
</div>

我正在使用 Vee-validate，我想要这个：İf b-field :type in is-danger 模式。用户不能去其他页面。我怎么知道脚本标签的类型是什么？

Answer 1

您可以将template ref 添加到<b-field>，并直接在表单的submit-event 处理程序中检查其type 属性：

<b-field ref="myField" />

export default {
  methods: {
    submit() {
      if (this.$refs.myField.type === 'is-danger') {
        alert('you shall not pass!')
      } else {
        console.log('submitting')
      }
    }
  }
}

demo