Vue.js отправка null из формы вместо пустой строки

Question

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

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

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

Answer 1

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

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>

БЛОГ НА HUSL

Vue.js отправка null из формы вместо пустой строки

Ответы (1 шт):