Vue 条件事件绑定参数

Question

我尝试有条件地绑定一个事件方法，例如

模板

 <div class="survey-card__option radio" :class="data.column ? data.column : ''"
                     v-for='(option, index) in data.options' :key="index">
                    <input type="radio" :name="form[data.id + '--' + fieldKey]"
                           :value="option.body"
                           :id="option.body"
                           v-on="{ change: data.hasButton ? watchChange(data, $event) : null }"
                           v-model="form[data.id + '--' + fieldKey]">&nbsp;
                    <label :for="option.body" class="survey-card__options__label">
                        <span>{{ option.body }}</span>
                    </label>
                </div>

倾听者

v-on="{ change: data.hasButton ? watchChange(data, $event) : null }"

和方法

watchChange(data, event) {
            console.log(event)//undefined
            console.log(data)
        }

我尝试跟踪选中的当前值并与 json 值匹配，以防万一显示一些文本。

该方法将触发，但我无法跟踪 $event 我收到以下错误

[Vue warn]: Property or method "$event" is not defined on the instance but referenced during render

Answer 1

watchChange(event) {
    if(!this.data.hasButton)
        return;
    console.log(event)
    console.log(this.data);
}

然后就可以这样绑定了v-on="watchChange"

Answer 2

你实际上必须自己定义 $event 参数（例如使用箭头函数）：

v-on="{ change: data.hasButton ? ($event) => watchChange(data, $event) : null }"

Vue 条件事件绑定参数

Vue conditional event binding with arguments

vue.js

event-handling

conditional

event-binding