title: Vue js using scope-slot and trying to use a property from within but having no visibility
body: <p>I am using vue form wizard <a href="https://github.com/BinarCode/vue-form-wizard" rel="nofollow noreferrer">https://github.com/BinarCode/vue-form-wizard</a> (and vue  form generator <a href="https://github.com/vue-generators/vue-form-generator" rel="nofollow noreferrer">https://github.com/vue-generators/vue-form-generator</a>)</p>
  
  <p>here the complete example, the problem is that when changing tabs, the text is not updating, as <code>this.buttonNextText</code> is undefined in the method <code>handleTabChange</code></p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="myprefix-step-cash"&gt;
      &lt;form-wizard @complete="onComplete"
                   @change="handleTabChange"
                   color="gray"
                   error-color="#a94442"
                   :ref="'vuewizard'"
      &gt;
        &lt;tab-content title="Personal details"
                     icon="ti-user" :before-change="validateFirstTab"&gt;
          &lt;vue-form-generator :model="model"
                              :schema="firstTabSchema"
                              :options="formOptions"
                              ref="firstTabForm"
          &gt;
  
          &lt;/vue-form-generator&gt;
        &lt;/tab-content&gt;
        &lt;tab-content title="Additional Info"
                     icon="ti-settings" :before-change="validateSecondTab"&gt;
          &lt;vue-form-generator :model="model"
                              :schema="secondTabSchema"
                              :options="formOptions"
                              ref="secondTabForm"
          &gt;
          &lt;/vue-form-generator&gt;
  
        &lt;/tab-content&gt;
        &lt;tab-content title="Last step"
                     icon="ti-check"&gt;
          &lt;h4&gt;Your json is ready!&lt;/h4&gt;
          &lt;div class="panel-body"&gt;
            &lt;pre v-if="model" v-html="prettyJSON(model)"&gt;&lt;/pre&gt;
          &lt;/div&gt;
        &lt;/tab-content&gt;
  
        &lt;template slot="footer" slot-scope="props"&gt;
          &lt;div class="dummy"&gt;
            &lt;!--&lt;wizard-button :style="props.fillButtonStyle"&gt;Cancel&lt;/wizard-button&gt;--&gt;
            &lt;wizard-button @click.native="props.prevTab()" class="myprefix-form-prev"  v-if="buttonPrevDisplay" v-html="buttonPrevText"&gt;&lt;/wizard-button&gt;
            &lt;wizard-button @click.native="props.nextTab()" class="myprefix-form-next"  v-if="buttonNextDisplay" v-html="buttonNextText"&gt;&lt;/wizard-button&gt;
          &lt;/div&gt;
        &lt;/template&gt;
  
      &lt;/form-wizard&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
    import VueFormGenerator from "vue-form-generator";
    export default {
      mounted: function () {
  
      },
  
      methods: {
  
        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 &gt;= 1){
            app.buttonPrevDisplay = true;
          }else{
            app.buttonPrevDisplay = false;
          }
          if(nextIndex == 2 ){
          }
          console.error("tab changing :DD");
        },
        onComplete: () =&gt; {
  
        },
  
  
  
        validateFirstTab: function () {
          return this.$refs.firstTabForm.validate();
        },
        validateSecondTab: function () {
          return this.$refs.secondTabForm.validate();
        },
  
        zipcode: (value) =&gt; {
          let re = /(^\d{5}$)|(^\d{5}-\d{4}$)/;
  
          if (!re.test(value)) {
            return ["Invalid Zip Code."];
          } else {
            return []
          }
        },
  
        prettyJSON: function (json) {
          if (json) {
            json = JSON.stringify(json, undefined, 4);
            json = json.replace(/&amp;/g, '&amp;').replace(/&lt;/g, '&lt;').replace(/&gt;/g, '&gt;');
            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 '&lt;span class="' + cls + '"&gt;' + match + '&lt;/span&gt;';
            });
          }
        }
      },
      data() {
        return {
          buttonPrevDisplay: false,
          buttonPrevText: myprefix_global_translate_obj.btn_txt_back,
          buttonNextDisplay: true,
          buttonNextText: myprefix_global_translate_obj.btn_txt_tab1,
          model: {
            loanAmount: '',
            zip: '',
            email: '',
            firstName: '',
            lastName: '',
            email: '',
            streetName: '',
            streetNumber: '',
            city: '',
            country: ''
          },
          formOptions: {
            validationErrorClass: "myprefix-has-error",
            validationSuccessClass: "myprefix-has-success",
            validateAfterChanged: true
          },
          firstTabSchema: {
            fields: [
              {
                type: "input",
                inputType: "text",
                label: myprefix_global_translate_obj.how_much_cash,
                placeholder: myprefix_global_translate_obj.how_much_cash_ph,
                model: "loanAmount",
                required: true,
                validator: VueFormGenerator.validators.string,
                styleClasses: 'myprefix-loanAmount'
              },
              {
                type: "input",
                inputType: "text",
                label: myprefix_global_translate_obj.what_zip,
                placeholder: myprefix_global_translate_obj.what_zip_ph,
                model: "zip",
                required: true,
                hint: myprefix_global_translate_obj.what_zip_hint,
                validator: this.zipcode,
                styleClasses: 'myprefix-zip'
              },
              {
                type: "input",
                inputType: "text",
                label: myprefix_global_translate_obj.what_email,
                model: "email",
                required: true,
                validator: VueFormGenerator.validators.email,
                styleClasses: 'myprefix-email'
              },
            ]
          },
          secondTabSchema: {
            fields: [
  
              {
                type: "input",
                inputType: "text",
                label: myprefix_global_translate_obj.what_last_name,
                model: "lastName",
                required: true,
                validator: VueFormGenerator.validators.string,
                styleClasses: 'myprefix-lastname'
              },
  
              {
                type: "input",
                inputType: "text",
                label: myprefix_global_translate_obj.what_first_name,
                model: "firstName",
                required: true,
                validator: VueFormGenerator.validators.string,
                styleClasses: 'myprefix-firstname'
              },
              {
                type: "input",
                inputType: "text",
                label: "Street name",
                model: "streetName",
                required: true,
                validator: VueFormGenerator.validators.string,
                styleClasses: 'col-9'
              },
              {
                type: "input",
                inputType: "text",
                label: "Street number",
                model: "streetNumber",
                required: true,
                validator: VueFormGenerator.validators.string,
                styleClasses: 'col-3'
              },
  
            ]
          }
        }
      }
    }
  &lt;/script&gt;
  
  &lt;style scoped lang="scss"&gt;
  
  &lt;/style&gt;
  </code></pre>