如何在vue组件外部的表中使用过滤器？

Question

我如何使用刀片文件外部组件的过滤器输入，同时仍然能够过滤vuejs文件中的表？

ie：我想在过滤器输入的位置进行重构。

在我的发票组件vuejs文件中-

<template>
  <div class="my-5 container-fluid">
    <h2>Invoice inner</h2>
    <b-input-group class="mt-3 mb-3" size="sm">
      <b-form-input v-model="keyword" placeholder="Filter" type="text"></b-form-input>
    </b-input-group>
    <b-table :fields="fields" :items="items" :keyword="keyword"></b-table>
  </div>
</template>

<script>
.....
</script>

在我的刀片模板中-

@section('content')
<section class="user-info d-md-flex justify-content-between py-4 mb-5">
    <div class="d-flex align-items-center pb-3">
        <img class="rounded-circle user-img"
            src="https://images.pexels.com/photos/3095439/pexels-photo-3095439.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
            alt="" />
   </div>

    <form class="form-inline">
       **//i want the filter input in this area and not above the table in the vue component and still be able to filter the table**
    </form>
</section>

<invoices-component />
@endsection

Answer 1

将组件注册为窗口对象

const app = new Vue({
    ...
});

window.app = app;

然后创建一个输入，它将更改应用程序的模型

<input type="text" onchange="window.app.keyword = this.value" />