0

как запретить eslint правку атрибута maxWidth на max-width нужно так

<modal
      name="category-modal"
      transition="pop-out"
      height="auto"
      width="95%"
      :scrollable="true"
      maxWidth="960"
    >

а он преобразовывает вот так

<modal
      name="category-modal"
      transition="pop-out"
      height="auto"
      width="95%"
      :scrollable="true"
      max-width="960"
    >
3

1 ответ 1

1

Не совсем понятна ваша причина изменения eslint'а, ведь он правильно обрабатывает форматирование, в html атрибутах допускается написание только kebab-case варианта, то есть max-width, но никак не maxWidth. В пропсах же наоборот, вы получаете переменную в виде camelCase.

В самой документации об этом написано: Prop Casing (camelCase vs kebab-case).

Vue.component('my-component', {
    props: {
        maxWidth: Number
    },
    template: '<p>Max width: <b>{{ maxWidth }}</b></p>'
});

new Vue({ el: "#app" });
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <my-component :max-width="10" />
    <my-component :maxWidth="20" />
    <my-component :maxwidth="30" />
</div>

1
  • да был косяк в документации модуля, теперь все ок, спасибо всем
    – Aslero
    3 фев 2021 в 19:40

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.