vue中表单传递数据答案

【问题标题】：Pass data from form in vuevue中表单传递数据
【发布时间】：2021-05-18 08:50:24
【问题描述】：

我目前正在开发 Vue.js 中的下拉表单。用户应该能够选择他希望从哪个时间段查看数据。然后我想提交他选择的值并在 js 中调用一个函数来适当地处理他的请求。

我尝试通过“onchange”提交值，但未能找到正确的解决方案。我很感谢任何帮助。这是代码：

    <div>
        <div class="stats">
            <!--drop menu-->
            <form>
                <label>Show feeds from <select id="input" name="ddlselect" onchange="submit">
                    <option>Auswählen</option>
                    <option value="Today">Today</option>
                    <option value="ThisWeek">This week</option>
                    <option value="PrevWeek">Previous Week</option>
                </select> </label>
                <br>
            </form>
            <br><br>

            <!--data from the api-->
            <div id="robot_data" v-for="maschine in userdaten.maschinen" :key="maschine.maschineId">
                {{maschine.bezeichnung}}
                <div id="feeds" v-for="feed in maschine.feeds" :key="feed.feedsId">
                    <!--use the var 'today' insted of the date string-->
                    <div v-if="feed.datum >= '2020-10-03' + ' 00:00:00' && feed.datum <= '2020-10-03' + '23:59:59'">
                        ID: {{feed.feedsId}} Datum: {{feed.datum}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

【问题讨论】：

一目了然，我可以告诉您....您错过了选择标签上的 v-model 指令，并且提交应移动到表单标签（v-on：change 或 @change）作为您的交易表单.....将您的提交代码添加到问题中......会很有帮助

标签： vue.js

【解决方案1】：

您想将您的事件添加到标签中。另外，在 Vue 中使用事件的方式是这样的 v-on:change 或 @change。

所以它应该是这样的：

<form v-on:change="yourMethod">

Here is more info on Vue events.

【讨论】：