@vuejs_ru
Vue.js — русскоговорящее сообщество

Общаемся на темы, посвященные Vue.js и опыту его использования. Проблемы. Новости. Решения. См. также: @js_ru, @react_js, @angular_ru, @nuxtjs_ru Вакансии только тут: @javascript_jobs

3988 members

Архив канала @vuejs_ru 1 декабря 2016 г.

07:35:51 ДП
User 552804
Привет. Делал кто нибудь генерация slug из строки? Есть инпут куда вводится название статьи, и есть инпут куда должен генерироваться slug, может кто подкинет инфу
07:41:07 ДП
User 552804
а ну ваще наверно не сложно, попробую сам накидать
07:41:44 ДП
User 55423102
Вообще не понял что ты там делаешь 😃
07:43:34 ДП
User 58768789
User 552804
Привет. Делал кто нибудь генерация slug из строки? Есть инпут куда вводится название статьи, и есть инпут куда должен генерироваться slug, может кто подкинет инфу
Первый же ответ в DuckDuckGo http://stackoverflow.com/questions/1053902/how-to-convert-a-title-to-a-url-slug-in-jquery#1054862
stackoverflow.com/questions/1053902/how-to-convert-a-title-to-a-url-slug-in-jquery
I'm working on an app in CodeIgniter, and I am trying to make a field on a form dynamically generate the URL slug. What I'd like to do is remove the punctuation, convert it to lowercase, and replac...
07:44:22 ДП
User 58768789
*Даже не знал, что такое slug. Теперь буду*
07:44:44 ДП
User 552804
ну я думал фильтром каким нить на vue сделать чтоб без жкверей
07:44:51 ДП
User 552804
ну ваще нашел уже решение
07:44:57 ДП
User 552804
не на vue но приспособить легко
07:45:12 ДП
User 58768789
Дык на вотчер закинь это, да и все
07:45:23 ДП
User 58768789
Или в computed лучше даже
07:45:24 ДП
User 552804
ну да, так и сделаю
07:45:34 ДП
User 55423102
Вотчер то зачем)
07:45:42 ДП
User 552804
компутед
07:45:45 ДП
User 55423102
лучше уж действительно computed или фильтром
07:46:16 ДП
User 58768789
Ну, так как из инпута в инпут перегоняется, я полагаю, что фильтр тут не стоит юзать
07:47:14 ДП
User 184398046
лучше input(:value='value' @input='onInput')
07:48:04 ДП
User 55423102
не, это уже изврат начинается :))) computed проще код оставит
07:48:10 ДП
User 58768789
User 184398046
лучше input(:value='value' @input='onInput')
И все же через компутед лучше.
07:48:18 ДП
User 184398046
v-model - это сахар над тем, что я написал
07:49:18 ДП
User 58768789
Ну да. И зачем тогда это юзать, если есть сахар?
07:50:04 ДП
User 184398046
потому что нужно более низкоуровнево залезть между input и value
07:50:16 ДП
07:50:33 ДП
User 58768789
Кому?
07:51:05 ДП
User 184398046
http://vuex.vuejs.org/en/forms.html
07:51:15 ДП
User 184398046
многим
07:51:48 ДП
User 55423102
@perin или поставь пакет (https://github.com/dodo/node-slug) и пользуйся) без зависимостей
github.com/dodo/node-slug
node-slug - slugifies even utf-8 chars!
07:51:59 ДП
User 58768789
Погодь. Мы ща говорим про задачу Жени.
07:53:53 ДП
User 552804
ae? нодовские пакеты ставить не буду, я вам не фронтовик)) у меня vue и vue resource без всяких дополнений и пакетов, только для отправки форм в laravel)
07:53:54 ДП
User 184398046
Ну ввобщем задача тривиальная, можно решить поразному, перформанс не нужен
07:54:29 ДП
User 58768789
User 552804
ae? нодовские пакеты ставить не буду, я вам не фронтовик)) у меня vue и vue resource без всяких дополнений и пакетов, только для отправки форм в laravel)
Вот плюсую
07:54:30 ДП
User 55423102
Ну ты исходник прям скопируй slug.js :D
07:55:05 ДП
User 552804
да, исходники можно, но можно просто регулярками накидать решение
07:55:20 ДП
User 58768789
Дык зачем? На стаковерфлоу функция в 4 строки! Зачем пакет-то ставить?
07:55:49 ДП
User 552804
ну вот
07:55:50 ДП
07:55:54 ДП
User 552804
щас только надо сделать
07:55:59 ДП
User 552804
не отвлекайте меня тут))
07:56:04 ДП
07:56:28 ДП
07:56:54 ДП
User 55423102
о, добавил себе)
07:58:29 ДП
User 552804
такс
07:58:47 ДП
User 552804
для проверки пока просто делаю
computed: {
  slug: function () {
    return 'slug_'+this.formInputs.title
  }
},
07:59:09 ДП
User 552804
а как мне теперь это значение подставлять в мой инпут, у которого v-model="formInputs.slug" ?
08:00:14 ДП
User 55423102
ну так в поле автоматом и подставится
08:00:19 ДП
User 55423102
при изменении formInputs.title
08:00:34 ДП
08:00:47 ДП
User 552804
у меня пока никуда этот computed не привязан
08:00:58 ДП
User 55423102
this.slug
08:00:58 ДП
User 552804
мне его напрямую в data пихать в formInputs.slug?
08:01:07 ДП
User 55423102
он считается как переменная у this
08:03:22 ДП
User 552804
computed: {
  slug: function () {
    return this.formInputs.title;
  }
},
это компутед,
formInputs: {
  slug: this.slug,
},
это в data. Но так какая то лажа выходит
08:04:10 ДП
08:14:31 ДП
User 552804
а как сделать watch нa formInputs.title? на точку ругается
08:14:51 ДП
User 552804
на весь formInputs чтоли делать
08:16:22 ДП
08:26:41 ДП
User 58768789
User 552804
computed: {
  slug: function () {
    return this.formInputs.title;
  }
},
это компутед,
formInputs: {
  slug: this.slug,
},
это в data. Но так какая то лажа выходит
В data нет никакой динамики. Вообще из data его убери. И делай тогда через вотчер.
08:26:55 ДП
User 552804
сделал уже, получилось всё
08:27:02 ДП
User 552804
только теперь надо сам slug генерить
08:27:23 ДП
User 552804
то что на стэковерфло там для инглиша
08:27:30 ДП
User 552804
надо найти чтото с транслитом
08:30:59 ДП
User 552804
http://pid.github.io/speakingurl/
08:31:01 ДП
User 552804
сделал этим
08:31:11 ДП
User 552804
всем спасибо)
08:50:57 ДП
User 164670195
User 552804
http://pid.github.io/speakingurl/
'ru' // Russian, круто, сохранил
02:05:51 ПП
User 152816933
Ребят, такой момент...
Нужно, что бы поьзователь мог сам задавать tagName контейнера компонента, хотя бы через props. 
Собстно, последнее решение которое я вижу, это через функциональные компоненты и render(). Но блин... Собирать шаблон компонета через render(createEl, ctx) {return createEl(ctx.props.tagName), [...]} - это же полная ж...
Может есть другой способ?
02:10:41 ПП
User 55423102
ну из компонента сделай генерацию события с новым именем
02:11:03 ПП
User 55423102
а в контейнере отслеживай событие компонента и при "изменений" уже подменяй
02:11:11 ПП
User 55423102
на то что с событием пришло
02:20:25 ПП
User 152816933
Уточню.
<my-component tagName="h1"></my-component >
должен отрендерится в 
<h1> ... какие-то внутренние кишки моего компонента ... </h1>
02:24:23 ПП
User 55423102
Ну в комплект пропсом прокинь, а в компоненте уже условие поставить в зависимости от того что придёт
02:24:40 ПП
User 55423102
Динамически тег любой выставлять мне кажется нельзя сделать
02:27:31 ПП
User 55423102
Или в сторону слотов посмотреть
02:27:37 ПП
User 55423102
Я с ними ещё не разбирался
02:35:03 ПП
User 152816933
Не понимаю, как мне тут условие поможет.
Слоты лишь доставляют контент из тегов внутрь компонента.
02:41:45 ПП
User 184398046
Ну так а чего оффпример не подошел с render? Там как раз твой случай описан
  render: function (createElement) {
    return createElement(
      this.tagName,   // tag name
      this.$slots.default // array of children
    )
  },
02:42:30 ПП
User 184398046
<my-component tagName="h1">
 А внутри что хочешь вставляй в дефоллтный слот
</my-component >
02:46:42 ПП
User 152816933
Мне не нужно, что что бы пользователь что-то запихивал внутрь <my-component></my-component>.
Если там будет слот, то он похерит мой внутренний шаблон.
03:32:07 ПП
User 55423102
Если делаешь что-то типа редактора может лучше markdown использовать. И никто ничего не похерит
03:38:05 ПП
User 152816933
У меня дропдаун менюшка. like bootstrap.
Данные для рендера приходят из объекта в props компонента.
Контейнер этой менюшки может быть и элементом списка, и кнопкой, и простым дивом. 
Собстно, я и хочу, что б пользователь мог изменять тэг этого контейнера.
03:42:27 ПП
User 55423102
Может передавать тогда имя тега строкой, а внутри компонента уже сделать метод который будет createElement пытаться делать и возвращать html результат генерации
03:45:46 ПП
User 152816933
По костыльному, я, конечно, могу в хуках создавать новый тэг с именем из пропсов, запихивать туда содержимое контейнера компонента... Но че т это треш, мне кажется