2

Имеется форма с элементом:

<div class="input-field col s12 m3">
  <input
      id="dataId"
      ref="dataId"
      type="text"
      v-model="dataId"
  >
  <label for="dataId">ID</label>
</div>

Поле не является обязательным. Однако, если пользователь ввел данные, а потом решил их стереть, то из формы отправится '' вместо null. Как можно это исправить, кроме как проверками на пустоту перед отправкой? Таких форм много и не хотелось бы везде писать проверки

1 ответ 1

0

Для этого подойдет только отдельный компонент для

Vue.component("MyInput", {
  template: `<input :value="value" @input="onChange">`,
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: String,
    },    
  },
  methods: {
    onChange($event) {
      const VALUE = $event.target.value || null;
      console.log("VALUE", VALUE);
      this.$emit("change", $event.target.value);
    },
  },
});

new Vue({
  el: '#app',
  template: `
    <div>
      <my-input v-model="search"></my-input>
      <strong>search: {{ search }}</strong>
      <br>
      <button type="button" @click="showModel">show model</button>
    </div>
  `,
  data() {
    return {
      search: null,
    };
  },
  methods: {
    showModel() {
      console.log("this.search", this.search + "");
    },
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.