在vue中使表单更新更简洁

Question

我有下面的代码。它有效，但无缘无故地极其复杂和冗长。我想知道是否有更有效的方法来做我想做的事情。

          <h6><label for="number">Change Number</label></h6>
          <input
            type="text"
            class="form-control"
            id="number"
            v-model="weather.number"
            name="number"
          />
          <h6><label for="password">Change Password</label></h6>
          <input
            type="text"
            class="form-control"
            id="password"
            v-model="weather.password"
            name="password"
          />   
          <h6><label for="time">Change Time</label></h6>
            <select
              type="text"
              class="form-control"
              id="time"
              required
              v-model="weather.time"
              name="time"
            >
              <option value="1">1 AM</option>
              <option value="2">2 AM</option>
              <option value="3">3 AM</option>
            </select>   
            <button @click="saveInput" class="btn btn-success">Submit</button>

Vue Javascript 下面 html:

saveInput() {
  if ((this.weather.password != '') && (this.weather.number != '') && (this.weather.time != '') ) {
    data = {
      email: this.$route.params.data[0].email,
      password: this.weather.password,
      number: this.weather.number,
      time: this.weather.time,
      state: this.weather.state
    }
  }
  else if ((this.weather.number != '') && (this.weather.time != '')) {
    data = {
      email: this.$route.params.data[0].email,
      password: this.$route.params.data[0].password,
      number: this.weather.number,
      time: this.weather.time,
      state: this.weather.state
    }
  }
  else if ((this.weather.password != '') && (this.weather.time != '')) {
    data = {
      email: this.$route.params.data[0].email,
      password: this.weather.password,
      number: this.$route.params.data[0].number,
      time: this.weather.time,
      state: this.weather.state
    }
  }
  else if ((this.weather.number != '') && (this.weather.password != '')) {
    data = {
      email: this.$route.params.data[0].email,
      password: this.weather.password,
      number: this.weather.number,
      time: this.$route.params.data[0].time,
      state: this.weather.state
    }
  }
  else {
    data = {
      email: this.$route.params.data[0].email,
      password: this.$route.params.data[0].number,
      number: this.$route.params.data[0].number,
      time: this.$route.params.data[0].time,
      state: this.weather.state
    }
  }

如您所见，我基本上是通过提交表单来检查用户是否更新了他或她的数据。如果类别没有更新，我只是使用来自后端路由的数据。我怎样才能使它更简洁，以便在用户提交表单更改时更新数据。

Answer 1

好问题。

在模板部分，我建议您将输入元素包装到组件中<my-input>，这可能会帮助您减少代码。
在脚本部分，验证表单的最佳做法是使用 Vuelidate or VeeValidate 等包。例如：使用 VeeValidate v3 验证输入：

<validation-provider rules="required" v-slot="{ errors }">
  <input v-model="value" name="myinput" type="text" />
  <span>{{ errors[0] }}</span>
</validation-provider>

祝你好运，伙计。

Answer 2

使用内联运算符 ||。这意味着如果在 || 之前值为 Undefined 那么 || 之后的值默认情况下。

data = {
  email: this.$route.params.data[0].email,
  password: this.weather.password || this.$route.params.data[0].password,
  number: this.weather.number || this.$route.params.data[0].number,
  time: this.weather.time || this.$route.params.data[0].time,
  state: this.weather.state
}

然后你就不用解释一堆'if / else if'

在vue中使表单更新更简洁

making form updates more concise in vue

javascript

backend

node.js

node-modules