在 Vue v2 中，如何验证输入到表单中的值是否为空？

Question

我已经尝试了很多不同的方法来使用 alert() 和简单的 if-else 语句来做到这一点，甚至是这个 link：https://vuejs.org/v2/cookbook/form-validation.html

但是没有任何效果！我做错了什么？

我的 index.html 里有什么：

  <div id="app">
    <div class = "addTask">
    <h1>A List of Tasks</h1>
    <p v-show="activeItems.length === 0">You are done with all your tasks! Celebrate!</p>
      <form @submit.prevent="addItem">
        <input type="text" v-model="title">
        <button type="submit">+</button>
      </form>
    </div>

这是我在 scripts.js:

var app = new Vue({
  el: '#app',
  data () {
    return {
      // errors: [],
      items: [{
        userId: 0,
        id: 0,
        title: "",
        completed: false,
        }],
        title: '',
        show: 'all',
    }
  },
  // Using axios to asynchrously query the API
  mounted () {
    axios
      .get("https://jsonplaceholder.typicode.com/todos")
      .then(response => this.items = response.data)
  },
  computed: {
    activeItems() {
      this.saveItems;
      return this.items.filter(item => {
        return !item.completed;
      });
    },
    filteredItems() {
      // An active state denotes the task is not yet completed
      if (this.show === 'active')
        return this.items.filter(item => {
          return !item.completed;
        });
      if (this.show === 'completed')
        return this.items.filter(item => {
          return item.completed;
        });
        //  This makes it so added tasks go to the top, not bottom
      return this.items.reverse();
    },
    
  },
  methods: {
    addItem() {

      if(this.items != 0) {
        this.items.push({
          title: this.title,
          completed: false
        })
        this.title = "";
      }
      else {
        alert("Please enter a task.")
      }

Answer 1

根据您的代码，您应该在数据函数中声明一个名为 title 的属性，并在 addItem 方法中检查 title 是否为空。

var app = new Vue({
  el: '#app',
  data () {
    return {
      // errors: [],
      title: '', // add this property in data function
      items: [{
        userId: 0,
        id: 0,
        title: "",
        completed: false,
        }],
        title: '',
        show: 'all',
    }
  },
  // Using axios to asynchrously query the API
  mounted () {
    axios
      .get("https://jsonplaceholder.typicode.com/todos")
      .then(response => this.items = response.data)
  },
  computed: {
    activeItems() {
      this.saveItems;
      return this.items.filter(item => {
        return !item.completed;
      });
    },
    filteredItems() {
      // An active state denotes the task is not yet completed
      if (this.show === 'active')
        return this.items.filter(item => {
          return !item.completed;
        });
      if (this.show === 'completed')
        return this.items.filter(item => {
          return item.completed;
        });
        //  This makes it so added tasks go to the top, not bottom
      return this.items.reverse();
    },
    
  },
  methods: {
    addItem() {

      if(this.title !== '') { //check if `title` is empty or not
        this.items.push({
          title: this.title,
          completed: false
        })
        this.title = "";
      }
      else {
        alert("Please enter a task.")
      }

我在 Stackblitz. You can also view the example directly by clicking here

中创建了一个示例

在 Vue v2 中，如何验证输入到表单中的值是否为空？

In Vue v2, How do I verify if a value entered into a form is empty?

javascript

vue.js

vuejs2