Question

盲目注视着一个看起来很简单的东西。我有一个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>

这是一个待办事项应用程序，用户可以在其中提交表单以通过REST API添加待办事项。

问题是用户第一次提交表单（不触摸复选框）时，我得到的是空的“已完成”。当用户通过单击复选框提交表单时（处于真或假状态），该表单将起作用。因此问题仅在未单击复选框时才发生。

我想更改代码，以使复选框的值在默认情况下始终设置为“ false”，除非用户将其切换。

如何使用VueJS完成

Answer 1

由于在数据属性中创建了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
  };

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

1 个答案: