Javascript 在VueJS中以表单形式显示和更新右值

我有一个页面，其中我在该页面上显示了不同的表。这些表是使用

b-card

创建的，它们都有一个唯一的Id。现在，在每个表的标题下，都有一个

b-form-input

字段，并有一个相关的更新按钮。现在，我想要的是：

通过调用

getDefaultValue

函数，文本框预先填充一个值（使用该表的ID从函数中获取）

如果用户编辑该框中的文本并按下更新按钮，则会调用一个API，其中包含表的ID以及他使用

addComment

函数键入的文本

我已经这样做了：

  <b-input-group prepend="Comments">
    <b-form-input v-model="text" :value="getDefaultValue(group[0].customUniqueKey, 'comments')" placeholder="Enter comment"></b-form-input>
    <b-input-group-append>
      <b-button v-on:click="addComment(uniqueId,text)" variant="info">Update</b-button>
    </b-input-group-append>
  </b-input-group>

async addComment (uniqueId, text) {
  // console.log('FORM', this.form)
  this.dataState = 'uploading'
  let endPoint1 = '/123/?ID='
  let endPoint2 = '&comment='
  let finalEndpoint = endPoint1 + uniqueId + endPoint2 + text
  this.url = this.$store.getters['apis'].endpoint + finalEndpoint
  //code for calling the API
},

  <b-card no-body class="mb-1" v-for="(group, uniqueId) in groupedItems" :key="uniqueId">
    <b-card-header header-tag="header" class="p-0" role="tab">
    </b-card-header>
    <b-collapse :id="`accordion-${uniqueId}`" role="tabpanel" visible>
 
     <b-input-group prepend="Comments">
        <b-form-input v-model="text" :value="getDefaultValue(group[0].customUniqueKey, 'comments')" placeholder="Enter comment"></b-form-input>
        <b-input-group-append>
          <b-button v-on:click="addComment(uniqueId,text)" variant="info">Update</b-button>
        </b-input-group-append>
      </b-input-group>

    <b-table...>
    </b-collapse>
  </b-card>