如何在VueJS中创建通用描述功能？

Question

我正在尝试创建一种功能，以在“ type type”字段旁边显示描述字段。

例如：

<b-field label="Location">
      <b-autocomplete
        :data="dataLocation"
        placeholder="select a location..."
        field="location"
        :loading="isFetching"
        :value="this.objectData.location"
        @typing="getAsyncDataLocation"
        @select="(option) => {updateValue(option.id,'location');this.value=option.description}"
      >
        <template slot-scope="props">
          <div class="container">
            <p>
              <b>ID:</b>
              {{props.option.id}}
            </p>
            <p>
              <b>Description:</b>
              {{props.option.description}}
            </p>
          </div>
        </template>
        <template slot="empty">No results found</template>                
      </b-autocomplete>
    </b-field>     

此处dataLocation是对象的数组，其中每个对象将具有id和description属性。

在此字段旁边，我要为其创建一个描述字段，例如：

 <b-field label="Location Description">
      <b-input
        v-model="value"
      ></b-input>

页面加载后，在位置字段的@select事件中，位置说明应显示正确的值。

在页面加载后，也许我可以在已挂载的函数中调用以下debounce异步方法。

我的通用函数：

 getData: debounce(function (value, arr, entity) {
                if (!value.length) {
                    arr = [];
                    return;
                }
                this.isFetching = true;
                api
                    .getSearchData(`/${entity}/?query=${value}`)
                    .then(response => {                
                        arr = [];
                       return response.description;
                    })
                    .catch(error => {
                        arr = [];
                        throw error;
                    })
                    .finally(() => {
                        this.isFetching = false;
                    });
            }, 500)