Question

我有两个按钮和一个输入。输入采用单击按钮的值。两个按钮具有相同的类别，单击一次（Vue）可添加活动的类别，然后单击第二次。单击时，获取按钮的值并将其附加在输入中。

我遇到的问题是，第二次触发点击后，用于获取值的功能就起作用了。

我尝试使用dblclick并删除活动课程的点击-但未做任何更改。有人可以帮忙吗？谢谢。

Vue项目（在方法中导入js函数）

<div class="col-md-12 buttons-wrapper" id="direction">
  <button id="buy-button" value="1" name="Direction1" class="button btn buy" @click="selected = 1" :class="{active:selected == 1}" v-on:click.capture="buttonDirectionValue">Buy</button>
  <button id="sell-button" value="2" name="Direction2" class="button btn sell" @click="selected = 2" :class="{active:selected == 2}" v-on:click.capture="buttonDirectionValue">Sell</button>
  <input id="inputDirection" name="Direction" type="text" placeholder="" class="form-control input-md" style="display: block" readonly></input>
</div>

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

Answer 1

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

以上应为您的代码。纠正措施是将.click放置在buttonDirectionValue（）函数之外。

如果将.click放置在buttonDirectionValue（）函数的内部，则仅当第一次单击该按钮并在第二次单击时触发该.click。

将其放置在外部时，将绑定.click页面加载并触发clickDirectionValue（）函数调用。

希望这会有所帮助

Answer 2

问题显然是您在按钮单击后绑定了click事件。

您可以在页面加载后立即绑定click事件：

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

// edit1

您还可以删除 v-on：click.capture =“ buttonDirectionValue”

并使用此代码绑定两个按钮的点击事件

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

第二次单击后触发按钮的功能

2 个答案: