如何检查“发送消息”按钮上的字段是否为空?

塔那94
<template>

<div>
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" v-model="firstName"  placeholder="Enter your name">
  </div>

  <div class="form-group">
    <label for="lastName">Last name</label>
    <input type="text" class="form-control" v-model="lastName" placeholder="Enter your last name">
  </div>

    <div class="form-group">
    <label for="message">Type Your message</label>
    <textarea class="form-control" v-model="message" rows="3"></textarea>
  </div>

  <div class="form-group form-check" v-for="number in numbers" :key="number">
    <input type="checkbox" :value="number.Broj" v-model="checkedNumbers">
    <label class="form-check-label" >{{number.Broj}}</label>
  </div>
    <button type="submit" class="btn btn-primary" v-on:click="alert" @click="sendMessage">Send message</button>
</div>
</template>


<script>
  import http from "../http-common.js";
  import userServices from "../services/userServices.js";
  export default {
    data()
    {
      return {
        firstName: null,
        lastName: null,
        message: null,
        numbers: "",
        checkedNumbers: [],
        success: 'You have submitted form successfully'
      }; 
    },
    methods:
    {
      async sendMessage()
      {
        await http.post("/message", {firstName: this.firstName, lastName: this.lastName, message: this.message, numbers: this.checkedNumbers});
        this.$data.firstName = "",
        this.$data.lastName = "",
        this.$data.checkedNumbers = [],
        this.$data.message = "";

      },

      alert() {
          alert(this.success)
          if(event)
            alert(event.target.tagName)
        },

      retrieveNumbers() {
        userServices.getNumbers().then(response => {
          this.numbers = response.data;
          console.log(response.data);
        })
        .catch(e => {
          console.log(e);
        });
      }

    },
    created() {
      this.retrieveNumbers();
    }
  }

</script>

因此,我想在用户单击“发送消息”按钮时添加检查输入字段的选项。我尝试了一些选择,但我对此很满意。因此,如果有人能帮助我,我将不胜感激。我还在学习。

我知道我必须使用v-if并创建用于检查字段的方法。

因此,如果您会很友好,并帮助我解决这个问题,我将不胜感激。

谢谢开发人员,社区<3

请给我一个具体的答案。因为我会以这种方式学习,所以请不要屈尊和“无答案”

萨利乌·萨尔(Saliou Sarr)

您可以手动进行操作:

<script>
  import http from "../http-common.js";
  import userServices from "../services/userServices.js";
  export default {
    data()
    {
      return {
        firstName: null,
        lastName: null,
        message: null,
        numbers: "",
        checkedNumbers: [],
        success: 'You have submitted form successfully'
      }; 
    },
    methods:
    {
      async sendMessage()
      {
        if(!(this.firstName && this.lastName && this.numbers)) return;
        await http.post("/message", {firstName: this.firstName, lastName: this.lastName, message: this.message, numbers: this.checkedNumbers});
        this.$data.firstName = "",
        this.$data.lastName = "",
        this.$data.checkedNumbers = [],
        this.$data.message = "";

      },

      alert() {
          alert(this.success)
          if(event)
            alert(event.target.tagName)
        },

      retrieveNumbers() {
        userServices.getNumbers().then(response => {
          this.numbers = response.data;
          console.log(response.data);
        })
        .catch(e => {
          console.log(e);
        });
      }

    },
    created() {
      this.retrieveNumbers();
    }
  }

</script>

或者您可以使用这个有用的库https://vuelidate.js.org/#sub-basic-form

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何检查“发送消息”按钮上的字段是否为空?

来自分类Dev

如何检查“发送消息”按钮上的字段是否为空?

来自分类Dev

如何检查“发送消息”按钮上的字段是否为空?

来自分类Dev

如何检查输入字段是否为空

来自分类Dev

如何检查表单隐藏字段是否为空,然后仅将受请求的请求参数发送到servlet

来自分类Dev

如何检查单选按钮的返回值是否为空?

来自分类Dev

如何检查DateTime字段是否为null或为空?

来自分类Dev

如何快速检查文本字段是否为空

来自分类Dev

如何检查输入字段在提交时是否为空

来自分类Dev

如何检查屏蔽的输入字段是否为空

来自分类Dev

jQuery:如何检查日期输入字段是否为空

来自分类Dev

如何根据别名检查字段是否为空

来自分类Dev

如何检查“密件抄送”字段是否为空

来自分类Dev

如何检查输入字段在提交时是否为空

来自分类Dev

如何检查$ scope上的模型是否为空

来自分类Dev

如何在Android上检查位图是否为空(空白)

来自分类Dev

如何检查$ scope上的模型是否为空

来自分类Dev

如何检查8086上的堆栈是否为空

来自分类Dev

如何在 Delphi 上检查 RichView 是否为空?

来自分类Dev

检查单选按钮是否为空

来自分类Dev

使用按钮检查 EditText 是否为空

来自分类Dev

检查“密件抄送”字段是否为空

来自分类Dev

检查文本字段是否为空

来自分类Dev

检查日历字段是否为空

来自分类Dev

检查会话是否为空,将其取消设置,然后在onclick上发送$ _POST数据

来自分类Dev

添加布尔字段与检查字段是否为空?

来自分类Dev

检查Postgres复合字段是否为空/空

来自分类Dev

Laravel 如何检查数据表ajax发送的请求是否为空

来自分类Dev

检查$ _POST是否为空并返回1条消息

Related 相关文章

  1. 1

    如何检查“发送消息”按钮上的字段是否为空?

  2. 2

    如何检查“发送消息”按钮上的字段是否为空?

  3. 3

    如何检查“发送消息”按钮上的字段是否为空?

  4. 4

    如何检查输入字段是否为空

  5. 5

    如何检查表单隐藏字段是否为空,然后仅将受请求的请求参数发送到servlet

  6. 6

    如何检查单选按钮的返回值是否为空?

  7. 7

    如何检查DateTime字段是否为null或为空?

  8. 8

    如何快速检查文本字段是否为空

  9. 9

    如何检查输入字段在提交时是否为空

  10. 10

    如何检查屏蔽的输入字段是否为空

  11. 11

    jQuery:如何检查日期输入字段是否为空

  12. 12

    如何根据别名检查字段是否为空

  13. 13

    如何检查“密件抄送”字段是否为空

  14. 14

    如何检查输入字段在提交时是否为空

  15. 15

    如何检查$ scope上的模型是否为空

  16. 16

    如何在Android上检查位图是否为空(空白)

  17. 17

    如何检查$ scope上的模型是否为空

  18. 18

    如何检查8086上的堆栈是否为空

  19. 19

    如何在 Delphi 上检查 RichView 是否为空?

  20. 20

    检查单选按钮是否为空

  21. 21

    使用按钮检查 EditText 是否为空

  22. 22

    检查“密件抄送”字段是否为空

  23. 23

    检查文本字段是否为空

  24. 24

    检查日历字段是否为空

  25. 25

    检查会话是否为空,将其取消设置,然后在onclick上发送$ _POST数据

  26. 26

    添加布尔字段与检查字段是否为空?

  27. 27

    检查Postgres复合字段是否为空/空

  28. 28

    Laravel 如何检查数据表ajax发送的请求是否为空

  29. 29

    检查$ _POST是否为空并返回1条消息

热门标签

归档