Vue js использует scope-slot и пытается использовать свойство изнутри, но не имеет видимости

Question

Я использую мастер форм vue https://github.com/BinarCode/vue-form-wizard (и генератор форм vue https://github.com/vue-generators/vue-form-generator)

. Вот полный пример, проблема в том, что при смене вкладок текст не обновляется, так как this.buttonNextText не определено в методе handleTabChange

<code><template>
  <div class="myprefix-step-cash">
    <form-wizard @complete="onComplete"
                 @change="handleTabChange"
                 color="gray"
                 error-color="#a94442"
                 :ref="'vuewizard'"
    >
      <tab-content title="Personal details"
                   icon="ti-user" :before-change="validateFirstTab">
        <vue-form-generator :model="model"
                            :schema="firstTabSchema"
                            :options="formOptions"
                            ref="firstTabForm"
        >

        </vue-form-generator>
      </tab-content>
      <tab-content title="Additional Info"
                   icon="ti-settings" :before-change="validateSecondTab">
        <vue-form-generator :model="model"
                            :schema="secondTabSchema"
                            :options="formOptions"
                            ref="secondTabForm"
        >
        </vue-form-generator>

      </tab-content>
      <tab-content title="Last step"
                   icon="ti-check">
        <h4>Your json is ready!</h4>
        <div class="panel-body">
          <pre v-if="model" v-html="prettyJSON(model)">

импорт VueFormGenerator из "vue-form-generator";экспорт по умолчанию {mount: function () {}, методы: {handleTabChange: function (prevIndex, nextIndex) {let app = this;console.error ('app.buttonNextText:' + app.buttonNextText);console.error ('prev:' + prevIndex);console.error ('next:' + nextIndex);if (nextIndex == 0) {app.buttonNextText = myprefix_global_translate_obj.btn_txt_tab1;} else {app.buttonNextText = myprefix_global_translate_obj.btn_txt_default;} if (nextIndex> = 1) {app.buttonPrevDisplay = true;} else {app.buttonPrevDisplay = false;} if (nextIndex == 2) {} console.error ("изменение вкладки: DD");}, onComplete: () => {}, validateFirstTab: function () {вернуть это. $ refs.firstTabForm.validate ();}, validateSecondTab: function () {вернуть это. $ refs.secondTabForm.validate ();}, почтовый индекс: (значение) => {let re = / (^ \ d {5} $) | (^ \ d {5} - \ d {4} $) /;if (! re.test (value)) {return ["Неверный почтовый индекс."];} else {return []}}, prettyJSON: function (json) {if (json) {json = JSON.stringify (json, undefined, 4);json = json.replace (/ & / g, '&'). replace (// g, '>');return json.replace (/ ("(\\ u [a-zA-Z0-9] {4} | \\ [^ u] | [^ \\"]) * "(\ s * :)? | \b (true | false | null) \ b | -? \ d + (?: \. \ d *)? (?: [eE] [+ \ -]? \ d +)?) / g, function (match) {var cls = 'number'; if (/^"/.test(match)) {if (/:$/.test(match)) {cls = 'key';} else {cls = 'string';}}else if (/true|false/.test(match)) {cls = 'boolean';} else if (/null/.test(match)) {cls = 'null';} return ' ' + match + '* ';});}}}, data () {return {buttonPrevDisplay: false, buttonPrevText: myprefix_global_translate_obj.btn_txt_back, buttonNextDisplay: true, buttonNextText: myprefix_global_translate_obj.btn_txt {'': электронная почта: ': электронная почта:': электронная почта: модель: ': электронная почта:': электронная почта: модель: ': электронная почта:''', lastName: '', электронная почта: '', streetName: '', streetNumber: '', city: '', страна: ''}, formOptions: {validationErrorClass: "myprefix-has-error", validationSuccessClass: "myprefix-has-success ", validateAfterChanged: true}, firstTabSchema: {fields: [{type:« input », inputType:« text », метка: myprefix_global_translate_obj.how_much_cash, местозаполнитель: myprefix_global_translate_mount_und_und_mount_mount_mand_m_c0: true, валидатор: VueFormGenerator.validators.string,styleClasses: 'myprefix-loanAmount'}, {type: "input", inputType: "text", метка: myprefix_global_translate_obj.what_zip, местозаполнитель: myprefix_global_translate_obj.what_zip_ph, модель: "zip", требуется: true_hip_j_t_t_t_h_t_t_t_t_t_0validator: this.zipcode, styleClasses: 'myprefix-zip'}, {type: "input", inputType: "text", метка: myprefix_global_translate_obj.what_email, модель: "email", требуется: true, валидатор: VueFormGenerator.validators.email, styleClasses: 'myprefix-email'},]}, secondTabSchema: {fields: [{type: "input", inputType: "text", метка: myprefix_global_translate_obj.what_last_name, model: "lastName", требуется: true, валидатор..string, styleClasses: 'myprefix-firstname'}, {type: "input", inputType: "text", метка: "Название улицы", модель: "streetName", требуется: true, валидатор: VueFormGenerator.validators.string, styleClasses: 'col-9'}, {type: "input", inputType: "text", label:"Номер улицы", модель: "streetNumber", обязательно: true, валидатор: VueFormGenerator.validators.string, styleClasses: 'col-3'},]}}}}

Answer 1

Возможно, это не совсем так, но у меня возникла похожая проблема с расширенным / свернутым состоянием аккордеона.Проблема заключалась в том, что мне просто нужно было указать в директиве v-bind свойство / значение, которое я хотел предоставить для дочерних компонентов.

<template>
   <div>
      <label @click="toggle">
         <slot name="trigger" :expanded="state"></slot>
      </label>

      <slot :expanded="state"></slot>
   </div>
</template>

<script>
   export default {
      name: 'Accordion',

      data() {
         return {
            state: false
         }
      },

      methods: {
         toggle() {
            this.state = !this.state;
         }
      }
   }
</script>

Страница с компонентами:

<accordion v-for="(rs, index) in data " :key="rs.id" class="accordion text-left mt-4">
   <template slot="trigger" slot-scope="state" :tabindex="index">
      <!-- some contents -->
   </template>

   <slidable slot-scope="state"
             :active="state.expanded"
             v-html="rs.content">
   </slidable>
</accordion>

Здесь state.expanded будет состояние аккордеона, и я смог получить к нему доступ из другого дочернего компонента (<slidable />).

---

РЕДАКТИРОВАТЬ

На самом деле, я думаю, что я заметил вашпроблема.Вам нужно связать события с их именами в кебаб-кейсе, например так:

<form-wizard @on-change="handleTabChange" 
             @on-complete="onComplete">
    // ...

Ресурсы:

• https://binarcode.github.io/vue-form-wizard/#/?id=events
• https://vuejs.org/v2/guide/components-custom-events.html#Event-Names