[Vuejs]-Button's function triggered after second click

buttonDirectionValue() {
    event.preventDefault();
    $("#direction button").trigger("click");
});
$("#direction button").click(function() {
    $("#inputDirection").val($(this).val());
});

Above should be your code. Correction is to place the .click outside of buttonDirectionValue() function.

If you place the .click inside of buttonDirectionValue() function, the .click will only be registered when the button is clicked for the first time and triggered on the second click.

While placing it outside will bind the .click on page load and trigger the click on buttonDirectionValue() function call.

Hope this helps

The problem obviously is that you bind the click event after the button click

you can bind the click event right after page loads like that:

    $(document).ready(function(){
        $("#direction button").click(function() {
            $("#inputDirection").val($(this).val());
        }
    });

//edit1

you can also remove the v-on:click.capture=”buttonDirectionValue”

and use this code to bind click events for both buttons

    $(document).ready(function(){
        $('button.buy, button.sell').click(function() {
            $("#inputDirection").val($(this).val());
        }
    });