从子级向父级发送数据时无法刷新 vue 引导表

Posted 2023-02-23

【中文标题】从子级向父级发送数据时无法刷新 vue 引导表

【英文标题】：Cannot refresh vue bootstrap table when emitting data from child to parent

【发布时间】：2020-03-16 01:14:41

【问题描述】：

我正在使用 vue-bootstrap https://bootstrap-vue.js.org/docs/components/table/ 并为标题实现了一个插槽，因此我可以在每个包含搜索框的列标题中都有一个显示和隐藏按钮。标头位于插槽中。在字段数据中，我添加了一个布尔值的 showFilter 属性。所以这个想法是它在真假之间切换。现在，当您将数据更改发送给它更新的父级时，这一切都有效。但是，表本身不会更新，直到您触发另一个操作（例如尝试对标题进行排序），然后它才会更新。我已经尝试了上面 url 中提到的强制刷新表数据，但这似乎不起作用，或者我无法弄清楚如何使用它，因为没有示例。

家长

<template>
<b-table
      ref="table"
      :items="filtered"
      :fields="fields"
      sort-icon-left
      responsive="sm"
    >
      <template v-slot:head()="data">
        <TableHeader :data="data" :filters="filters" />
      </template>
    </b-table>
</template>

data() 
  return 
      fields: [
        
          key: "name",
          sortable: true,
          showFilters: true,
        ,
         key: "age", sortable: true, showFilters: true ,
      ],
    

儿童

<template>
  <div>
    <div class="text-info"> data.label.toUpperCase() </div>
    <div>
      <button @click="setUpdate(data.field)">filters</button>
    </div>
    <input
      v-show="data.field.showFilters"
      v-model="filters[data.field.key]"
      :placeholder="data.label"
      @keyup="$emit('update:filters[data.field.key]')"
    />
  </div>
</template>

  methods: 
    setUpdate(field) 
      this._originalField = Object.assign(, field);
      field.showFilters = !field.showFilters;
      this.$root.$emit("update:field.showFilters", "bv::refresh::table");
      console.log(field.showFilters);
    
  

【问题讨论】：

能否包含所有组件功能/数据？过滤器对象在哪里？

【参考方案1】：

我通过使用引导折叠按钮解决了这个问题，并在孩子身上处理这一切，我认为这更有意义！

   <b-collapse :id="'collapse' + data.field.key">
      <b-card>
        <!-- content -->
      </b-card>
    </b-collapse>