首页 文章

VueJS：如何将默认状态设置为复选框

提问于
浏览 次
0

盯着看起来非常简单的东西 . 我有一个包含复选框的Vue应用程序 . 这是我的代码：

<div>
  <label>Completed</label>
  <input
     type="checkbox"
     class="form-control"
     id="checkbox"
     v-model="todo.checked"
  >
  {{todo.checked}}
</div>


<script>
import axios from "axios";

export default {
  name: "Add",
  data() {
    return {
      todo: {}
    };
  },
  methods: {
    addTodo(e) {
      const path = "http://localhost:5000/api/todos";

      let newTodo = {
        name: this.todo.name,
        description: this.todo.description,
        completed: this.todo.checked
      };
      console.log("Todo: ", newTodo.completed);
      axios
        .post(path, newTodo)
        .then(res => {
          console.error("Todo item added successfully");
          this.$router.push({ path: "/todos", query: { alert: "Todo added" } });
        })
        .catch(error => {
          // eslint-disable-next-line
          console.error(error);
        });

      e.preventDefault();
    }
  }
};
</script>

这是一个todo应用程序，用户通过REST API提交表单以添加待办事项 .

问题是，用户第一次提交表单（并且没有触摸复选框）我得到一个空的'已完成' . 当用户通过单击复选框（无论是真还是假状态）提交表单时，它都有效 . 因此，只有在未单击复选框时才会出现问题 .

我想更改我的代码，以便复选框的值始终默认设置为'false'，除非用户切换它 .

如何用VueJS完成

vue.js

1 回答

  • 2

    由于您在数据属性中创建了 todo 项，因此应该在那里设置该待办事项的默认值 .

    data() {
    return {
      todo: {
        name: '',
        description: '',
        checked: false
      }
    };
  },

    这样可以确保您最终调用api时具有默认值，以及重新计算计算属性等时的正确反应性 .

    另一种方法是在将请求发送到api时设置默认值，但这会使您无法正确注册 todo 的更改，并导致您认为计算机属性发生变化的奇怪错误，但事实上不会改变 .

    let newTodo = {
    name: this.todo.name || '',
    description: this.todo.description || '',
    completed: this.todo.checked || false
  };
    回复于

相关问题