Обновление целых чисел в FormulateForm не работает

Question

Я только начинаю изучать Vue Formulate, так что, возможно, я упускаю что-то очевидное. Я связываюFormulateFormв простой объект, содержащий несколько свойств. Когда я изначально устанавливаю модель, значения отображаются в форме правильно, но когда я устанавливаю модель для другого объекта, текстовые и логические свойства обновляются в форме, но целочисленные свойства сохраняют свои исходные значения. Кажется странным, что что-то такое простое может сломаться, так что я делаю что-то не так?

<template>
  <div>
    person_id: {{localData.person_id}}
    <FormulateForm v-model="localData">
      <FormulateInput name="person_id" label="Person Id" />
      <FormulateInput name="first_name" label="First Name" />
      <FormulateInput name="age" label="Age" />
      <FormulateInput name="is_cool" type="checkbox" label="Cool?" />
    </FormulateForm>
    <p>
      Click setData1 and then setData2.  The integer values (person_id and age) are not updated in the form.
    </p>
    <div style="display: flex">
      <FormulateInput type="button" label="setData1" @click="setData1" />
      <FormulateInput type="button" label="setData2" @click="setData2" />
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    localData: {}    
  }),
  methods: {
    setData1: function(){
      this.localData = { person_id: 1, first_name: 'Bob', age: 24, is_cool: true };
    },
    setData2: function(){
      this.localData = { person_id: 2, first_name: 'Tony', age: 32, is_cool: false };
    }
  }
};
</script>

codeandbox.io

Answer 1

Просто добавьте параметры к флажку, как показано ниже.

       <FormulateInput name="is_cool" type="checkbox" label="Cool?" :options="is_cool"/>