За последние 24 часа нас посетили 20670 программистов и 1012 роботов. Сейчас ищет 371 программист ...

Связать реактивно BaseForm и Multiselect

Тема в разделе "JavaScript и AJAX", создана пользователем rewuxiin, 9 окт 2019.

Метки:
  1. rewuxiin

    rewuxiin Активный пользователь

    С нами с:
    17 апр 2012
    Сообщения:
    611
    Симпатии:
    87
    Если слишком очевидно - не бейте тапками, я пока изучаю vue.
    Не получается реактивно связать модели.
    Параметры из baseform в multiselect передаются без проблем, при выборе в multiselect я вижу в отладчике, что параметр value изменился, но в форму данные не попадают

    Использую laravel и админку craftable, она идет вместе с BaseForm
    Шаблоны у них в inline форме, выглядит это вот так.

    Код (Javascript):
    1. import AppForm from '../app-components/Form/AppForm';
    2.  
    3. Vue.component('post-form', {
    4.     mixins: [AppForm],
    5.     data: function() {
    6.         return {
    7.             form: {
    8.                 category:'',
    9.                 slug:  '' ,
    10.                 is_images:  false ,
    11.                 is_video:  false ,
    12.                 is_text:  false ,
    13.                 is_home_page:  false ,
    14.                 is_home_page_main:  false ,
    15.                 home_position:  '' ,
    16.                 count_views:  '' ,
    17.                 count_views_today:  '' ,
    18.                 template_id:  '' ,
    19.                 title:  '' ,
    20.                 h1:  '' ,
    21.                 short_description:  '' ,
    22.                 meta_title:  '' ,
    23.                 meta_description:  '' ,
    24.                 home_name:  '' ,
    25.                 text:  '' ,
    26.                 enabled:  false ,
    27.                 published_at:  '' ,
    28.                 created_by_admin_user_id:  '' ,
    29.                 updated_by_admin_user_id:  '' ,
    30.  
    31.             }
    32.         }
    33.     }
    34.  
    35. });
    HTML:
    1. <post-form
    2.    :action="'{{ $post->resource_url }}'"
    3.     :data="{{ $post->toJson() }}"
    4.     v-cloak
    5.     inline-template>
    6.  
    7.     <form class="form-horizontal form-edit" method="post" @submit.prevent="onSubmit" :action="this.action" novalidate>
    8.  
    9. <div class="form-group row align-items-center" :class="{'has-danger': errors.has('category'), 'has-success': this.fields.category && this.fields.category.valid }">
    10.     <label for="category" class="col-form-label text-md-right" :class="isFormLocalized ? 'col-md-4' : 'col-md-2'">{{ trans('admin.post.columns.category') }}</label>
    11.         <div :class="isFormLocalized ? 'col-md-4' : 'col-md-9 col-xl-8'">
    12.  
    13. /*Здесь я использую свой компонент - select-category, связка должна происходить через form.category*/
    14.                 <select-category
    15.                    v-model="form.category"
    16.                    placeholder="{{ trans('brackets/admin-ui::admin.forms.select_an_option') }}"
    17.                    :options="{{ $categories  }}"
    18.                    >
    19.                 </select-category>
    20.     </div>
    21. </div>
    22.  
    23. </form>
    24. </post-form>
    HTML:
    1. <template>
    2.     <div>
    3.         <multiselect
    4.            v-model="value"
    5.            deselect-label="Can't remove this value"
    6.            track-by="id"
    7.            label="name"
    8.            placeholder="Select one"
    9.            :options="options"
    10.            :searchable="false"
    11.            :allow-empty="false">
    12.  
    13.             <template
    14.                slot="singleLabel"
    15.                slot-scope="{ option }">
    16.                 {{ option.name }}
    17.             </template>
    18.  
    19.         </multiselect>
    20.     </div>
    21. </template>
    22.  
    23.     import Multiselect from 'vue-multiselect'
    24.  
    25.     export default {
    26.         props: {
    27.             options:{
    28.                 type: Array
    29.             },
    30.             value:{
    31.                 type: Object
    32.             }
    33.         },
    34.         components: {
    35.             Multiselect
    36.         },
    37.         data () {
    38.             return {
    39.                 value: this.value,
    40.                 options: this.options,
    41.  
    42.  
    43.             }
    44.         },
    45.     }
    46.  

    где я туплю?
     
  2. rewuxiin

    rewuxiin Активный пользователь

    С нами с:
    17 апр 2012
    Сообщения:
    611
    Симпатии:
    87
    а туплю я глядя в доку по админке. перемудрил.
     
  3. Roman __construct

    Roman __construct Активный пользователь

    С нами с:
    27 апр 2019
    Сообщения:
    1.270
    Симпатии:
    112
    комбинировать Vue и Blade это реально подвиг )))

    не для слабых духом))))))
     
  4. rewuxiin

    rewuxiin Активный пользователь

    С нами с:
    17 апр 2012
    Сообщения:
    611
    Симпатии:
    87
    @Roman __construct, я сам, как эту админку развернул и после работы билдера заглянул в шаблоны, офигел.
    но стало интересно, где-то неуклюже, где-то даже удобно.
     
  5. Roman __construct

    Roman __construct Активный пользователь

    С нами с:
    27 апр 2019
    Сообщения:
    1.270
    Симпатии:
    112
    ну мб и так

    но лично я считаю что использовать Vue иначе как CLI - не айс))

    хотя вот не далее как сегодня руки чесались - мне нужно было к одному простенькому сайту какое-то UI приделать, я в свое время привык к Element UI, но оно только под фреймворки идет, и была такая шальная мысля - прикрутить Vue прям в HTML но я успешно прогнал ее прочь)))))))))