将3个数据对象合并为Vue模板中的单个数据对象

Question

好的，这就是高层次。在data()字段中有3个对象

data () {
   birth_day: '',
   birth_month: '',
   birth_year: '',
   birthdate: '',
}

正如您在上面看到的，我还有一个名为“生日”的第四个数据对象。当用户填写每个项目时，我希望将它们合并为年-月-日格式的生日(用于数据库存储)。

如果可能的话，我也想添加一个0，如果有人输入了三月的3，而不是03。

我有个问题把我的头绕在这里。这是一个多步骤登记表的一部分。

任何帮助都会很有帮助的！

为任何人询问-这是模板代码：

<div class="flex flex-row justify-between">
                    
   <div class="relative border border-gray-500 rounded-md px-3 py-2 shadow-sm focus-within:ring-1 focus-within:ring-red-600 focus-within:border-red-600">
       <label for="birth_month" value="birth_month" class="absolute -top-2 left-2 -mt-px inline-block px-1 bg-gray-900 text-sm font-medium text-gray-50">Month</label>
       <input minlength="2" maxlength="2" type="text" name="birth_month" id="birth_month" class="bg-gray-900 text-white block w-full border-0 p-0 placeholder-gray-500 focus:ring-0 sm:text-sm" placeholder="02" />
   </div>

   <div class="relative border border-gray-500 rounded-md px-3 py-2 mx-4 shadow-sm focus-within:ring-1 focus-within:ring-red-600 focus-within:border-red-600">
       <label for="birth_day" value="birth_day" class="absolute -top-2 left-2 -mt-px inline-block px-1 bg-gray-900 text-sm font-medium text-gray-50">Day</label>
       <input minlength="2" maxlength="2" type="text" name="birth_day" id="birth_day" class="bg-gray-900 text-white block w-full border-0 p-0 placeholder-gray-500 focus:ring-0 sm:text-sm" placeholder="15" />
   </div>

   <div class="relative border border-gray-500 rounded-md px-3 py-2 shadow-sm focus-within:ring-1 focus-within:ring-red-600 focus-within:border-red-600">
      <label for="birth_year" value="birth_year" class="absolute -top-2 left-2 -mt-px inline-block px-1 bg-gray-900 text-sm font-medium text-gray-50">Year</label>
      <input minlength="4" maxlength="4" type="text" name="birth_year" id="birth_year" class="bg-gray-900 text-white block w-full border-0 p-0 placeholder-gray-500 focus:ring-0 sm:text-sm" placeholder="2000" />
   </div> 

</div>

Answer 1

如果我理解正确的话，请尝试如下所示：

​

new Vue({
  el: '#demo',
  data() {
    return {
      birth_day: '',
      birth_month: '',
      birth_year: '',
      birthdate: '',
    }
  },
  methods: {
    formatNr(nr) {
      if(this[nr].length < 2) this[nr] = `0${this[nr]}`
    },
    formatDate() {
      return `${this.birth_year}-${this.birth_month}-${this.birth_day}`
    },
    save() {
      this.birthdate = this.formatDate()
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div>          
    <div>
      <label for="birth_month" value="birth_month">Month</label>
      <input v-model="birth_month" @blur="formatNr('birth_month'), save()" minlength="2" maxlength="2" type="text" name="birth_month" id="birth_month" placeholder="02" />
    </div>
    <div>
      <label for="birth_day" value="birth_day">Day</label>
      <input v-model="birth_day" @blur="formatNr('birth_day'), save()" minlength="2" maxlength="2" type="text" name="birth_day" id="birth_day" placeholder="15" />
    </div>
    <div>
      <label for="birth_year" value="birth_year">Year</label>
      <input v-model="birth_year" @blur="save()" minlength="4" maxlength="4" type="text" name="birth_year" id="birth_year" placeholder="2000" />
    </div> 
  </div>
  <h4>birthdate: {{ birthdate }}</h4>
</div>

​