problem in clicknext watch

[tonpereira]

Hello, my name is Everton.
I made in my project every implementation as in the examples, but the clickedNext that stays in the watch does not work, when I click on some next one it does not perform any action therein. could you help me in what I am wrong?
thank you

follows a piece of my code of the first step that is so ... in the second step I have the same structure so that there are many form fields would be great to put here, but there are all the fields and the logic and the watch of the same form ... but the clickedNext does not work and does not enter that part of the code.

export default {
  props: ['clickedNext'],
  mixins: [validationMixin],
  data () {
    return {
      etapaAtual: {
        interessado: false,
        representante: false,
        servicos: false,
        agendamento: false
      },
      progress: 20,
      form: {
       checked: false
      }
    }
  },
  validations: {
    form: {
      checked: { required }
    }
  },
  mounted () {
    if (!this.$v.$invalid) {
      this.$emit('can-continue', {value: true})
    }
    else {
      this.$emit('can-continue', {value: false})
    }
  },
  components: {
      TabelaDadosAgend, CpOrientacoes
  },
  methods: {
  },
  watch: {
    $v: {
        handler: function (val) {
            if (!val.$invalid) {
              this.$emit('can-continue', {value: true})
            }
            else {
              this.$emit('can-continue', {value: false})
            }
        },
        deep: true
    },
    clickedNext (val) {
        if (val === true) {
        }
    }
  }
}

[hazzo]

Hi @tonpereira,

Sorry if the code sample misguide you. But that property actually won't do nothing for you because is an implementation of old code that I will get ride of it in the next update.

If you would like to know when the next button is clicked the horizontal-stepper emits an event called clicked-next. You can manage this event from the parent component that holds the stepper component with a simple @clicked-next="yourFunction().

What is your purpose of knowing that next button has been clicked from a child component? I ask just to help and see if we can improve code.

Thanks for the contribution.

[tonpereira]

A simple example of my application.
In my step 1 I have 2 input fields that receive data to be validated before moving on to a next step, so I check if they are valid in the click of the next and if they are I let it go to step 2, if not I will print one error message and leave the user in step 1.

[hazzo]

This is an EDIT. Sorry I was confused, I reviewed the code and yes is actually working. The the clickedNext prop is changing when you click on the next button. Don't know why is not working for you.

[tonpereira]

Let me explain better.
I have a field of name and document number. the name is required and the document number has a minimum size, but I have to do a validation that says that the two together need to be exactly the same as I have in my database.
so I need to send the two information together to the database at once to do this validation, the full name that he typed and the document number.
but I do not have an event saying he finished typing the name.
Then I use the next one to get the two complete typed fields.

I think it's clearer now.

[hazzo]

Okey, the issue that I see here is that when you click the next button the property is changed to true just onces. And will not fallback to false. So that's why your are seeing just one change in the watcher.

I will have to implement a way that you could send a response so I could change again the button value to false so when the user clicks again it can change again to true.

I don't know if I getting right your point, but the actions that you want should be:

1. Watch the prop clickedNext
2. Clicks next button
3. clickedNext value changes to true
4. When true you send data to your database for validation
5. You return a response if data is valid or not, either responses will always change prop clickedNext for that step to false
6. Also if true execute a callback and if false another (ex: continue step or display error message).
7. Now clickedNext = false so user can click again button and trigger watch all again.

Right?

[tonpereira]

<horizontal-stepper ref="alterarData" :steps="etapas" @completed-step="completeStep" @active-step="isStepActive" @stepper-finished="validDados">

Do I have to spend any event on my horizontal-stepper? or that way that I mounted it is correct?

[tonpereira]

Yes .. I think you understood, that's what I need to do!
if the return from the database is true, skip the step, if false error message in the same step as it is

[hazzo]

Hi @tonpereira,

I added the change-next event. It can be emitted by each step component to change the value of it's clickedNext property.

Ex.:

• Watch clickedNext
• Clicks next
• Changes to true.
• Evaluate form with server.
• Wait ajax response.
• On response emit event change-next with the desired boolean value to trigger again watch on property.

The demo has a sample on step one that console logs the boolean value of the property.

Hope it helps,

Cheers!

[hazzo]

Feel free to reopen the issue if this don not solves your problem.

[tonpereira]

Thank you so much! As soon as I run the tests, I'll give you an answer if it's all right.