laravel - 我如何对 vue 组件外的表使用过滤器？

Question

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

即:我想重构过滤器输入的位置。

在我的发票组件 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>

在我的 Blade 模板中-

@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" />