更新

Question

我是Vue的新手。我创建了一个包含选择的表单组件。当此选择更改时，我想使用自定义功能。我在这个论坛和网络上都进行了搜索，并尝试了很多代码，但并未启用该功能。这是我的表单模板：

<template>

<form method="post" action="/Home/Register">

    <div class="form-row">

        <div class="form-title">

            <label for="EventId">
                Choose *
            </label>

        </div>

        <div class="form-input">

            <select class="form-control" name="EventId" id="EventId" @change="onSelectChange">
                <option value="" disabled>Please Select...</option>
                <option :value="item.Id" :data-price="item.EventPrice" v-for="item in model.Events">{{ item.EventName }}</option>
            </select>

        </div>

    </div>

    <div class="form-row">

        <div class="row" style="justify-content: center;">

            <button class="btn btn-success">
                Register
            </button>

        </div>

    </div>


</form>

模板的脚本标签：

export default {
        props: ["model"],
        methods: {
            onSelectChange : function(event) {
                console.log(event);
            }
        }
    }

我也尝试过选择v模型，但没有运气。我已经在Chrome中通过vue在生成的js代码中放置了一个断点，“变更”功能没有被触发。

任何帮助将不胜感激。
谢谢，

更新

我很感谢所有答案和评论，但我需要说明此问题仅适用于“ Vue模板”文件。我有一个“ RegistryForm.vue”模板文件，并且正在使用webpack构建此文件。当此模板文件中的更改后，我需要获取选定的选项值。我的“ onSelectChange”事件没有触发，但我仍在寻找解决方案。这些模板文件是选择Vue作为我们Javascript框架的最重要原因。而且，如果无法解决此问题，则应该使用另一个框架从头开始开发系统。
感谢您再次提供帮助。

Answer 1

尝试将事件传递给您的onSelectChange方法。这对我有用：

<form method="post" action="/Home/Register">
    <div class="form-row">
        <div class="form-title">
            <label for="EventId">
                Choose *
            </label>
        </div>
        <div class="form-input">
            <select class="form-control" name="EventId" id="EventId" @change="onSelectChange($event)"> 
                <option value="" disabled>Please Select...</option>
                <option :value="item.Id" :data-price="item.EventPrice" v-for="item in model.Events" >{{ item.EventName }}</option>
            </select>

        </div>

    </div>

    <div class="form-row">

        <div class="row" style="justify-content: center;">

            <button class="btn btn-success">
                Register
            </button>

        </div>

    </div>
</form>

变更不会在Vue模板中触发

更新

1 个答案: