Как предотвратить преобразование имен атрибутов в нижний или нижний регистр для компонента Vue с помощью Jeykll - PullRequest
Новая
       14

Как предотвратить преобразование имен атрибутов в нижний или нижний регистр для компонента Vue с помощью Jeykll

1 голос
/ 11 июня 2019

Я использую компонент Vue, vue-carousel, в проекте Jekyll. Все работает, кроме управления через атрибуты, потому что компонент ожидает верблюжий случай, но Jekyll преобразует атрибуты в нижний регистр. Итак, мой код: 

<carousel
  :perPage="1"
  :navigationEnabled="true"
  :navigationNextLabel="'❯'"
  :navigationPrevLabel="'❮'"
  :paginationEnabled="false"
  class="gr__carousel">

  {% for slide in include.content.slides %}
    {% include slide.html %}
  {% endfor %}
</carousel>

генерируется с атрибутами: 

<div 
  class="VueCarousel gr__carousel" 
  perpage="1" 
  navigationenabled="true" 
  navigationnextlabel="❯" 
  navigationprevlabel="❮">
...
</div>

одно решение из Почему Джекилл преобразует мои заглавные слова в строчные в категориях

должен был отредактировать драгоценный камень Джекилла, но я хотел бы избежать этого, если это возможно. Есть ли другие способы обойти эту ситуацию?

1 Ответ

0 голосов
/ 11 июня 2019

Vue позволяет атрибутам, используемым для передачи реквизита, использовать camelCase или kebab-case.Так что, если Jekyll вызывает проблемы с :perPage, вы можете просто использовать :per-page.

https://vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case

https://vuejs.org/v2/style-guide/#Prop-name-casing-strongly-recommended

Vue нормализует эти имена проп, еслисоздание экземпляров компонентов, чтобы они всегда были доступны с помощью camelCase в экземпляре.Так что это будет this.perPage независимо от того, как вы это передадите.

Я не уверен на 100%, но я думаю, что преобразование сделано в normalizeProps:

https://github.com/vuejs/vue/blob/3819af5c9dedde4d1ea81f9caa127e611c8752e3/src/core/util/options.js#L294

...