0

我刚刚开始研究 Vue Formulate，所以也许我遗漏了一些明显的东西。我将 a 绑定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>

码沙盒.io

4

0 回答 0