如何将自定义属性添加到vue输入字段

Question

<datepicker
            initial-view="year"
            input-class="styled-form__input"
            placeholder="Select date"
            @input="changeHandler"
            calendar-button-icon="fa fa-calendar"
            name="date"
            language="eng"
    ></datepicker>

以上代码生成以下html代码。

<input type="text" name="date" placeholder="Select date" class="styled-form__input">

我的问题是，如何将自定义属性添加到输入字段。 我想添加autocomplete =“false”

Answer 1

我检查了source code，目前无法添加自定义属性。 有一种解决方法，您可以为所有表单关闭autocomplete，但它可能不适合您的情况。

<form autocomplete="off">
  <datepicker
    initial-view="year"
    input-class="styled-form__input"
    placeholder="Select date"
    @input="changeHandler"
    calendar-button-icon="fa fa-calendar"
    name="date"
    language="eng">
  </datepicker>
</form>

Answer 2

就像@ittus所说的那样，该库没有添加自动完成功能的选项。

可以通过vanilla Javascript添加。

将ref添加到datepicker

  <datepicker ref="datepicker1"></datepicker>

使用mounted hook

中的ref查询DOM

  mounted() {
    this.$refs.datepicker1.$el.querySelector('input').autocomplete = false;
  }