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

You actually have to define the the $event argument by yourself (use a arrow function for example):

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

Vue条件事件与参数绑定

2 个答案: