[Vuejs]-Vuetify data table with external search?

You can bind the search prop of v-data-table to your v-text-field‘s v-model.

So if you have:

<v-text-field v-model="searchInput"/>

Where searchInput is a local data object, you can bind this object:

<v-data-table :search="searchInput"/>

Update: From the code you’ve added, they are all in different files. Seems like you need to provide a prop to the table component. And emit custom event from text field component to parent component, where the search input will get updated. Here’s the correct code:

CardList.vue

<template>
  <v-container>
      <v-data-table
        :headers="headers"
        :items="users"
        :search="search"
        hide-default-footer
        class="elevation-1"
      >
        <template v-slot:[`item.datos_paciente.nombre`]="{ item }"
          >{{ item.datos_paciente.nombre }}
          {{ item.datos_paciente.apellidos }}</template
        >
        <template v-slot:[`item.ficha_dental.estado`]="{ item }">
          <v-chip :color="getColor(item.ficha_dental.estado)" dark>
            {{ item.ficha_dental.estado }}
          </v-chip>
        </template>
        <template v-slot:[`item.options`]>
          <v-select v-model="selectDefault" :items="drop"></v-select>
        </template>
      </v-data-table>
      <div class="text-center pt-2">
        <v-pagination v-model="page" :length="pageCount"></v-pagination>
      </div>
    </v-card>
  </v-container>
</template>

<script>
import usersData from "../assets/json/pacientes.json";

export default {
  name: "CardList",
  props: {
    search: String,
  },
  data() {
    return {

      users: usersData,

      selectDefault: "Editar",
      drop: ["Editar", "Finalizar", "Borrar"],

      headers: [
        {
          text: "Nombre y Apellidos",
          value: "datos_paciente.nombre",
        },
        { text: "Clínica", value: "ficha_dental.clinica" },
        {
          text: "Objetivo Tratamiento",
          value: "ficha_dental.acadas_tratamiento",
        },
        { text: "Estado", value: "ficha_dental.estado" },
        { text: "Acciones", value: "options" },
      ],
    };
  },

Search.vue

<template>
  <v-form>
    <v-text-field
      outlined
      filled
      append-icon="mdi-magnify"
      color="blue"
      placeholder="Buscar..."
      @input="$emit('updateSearch', $event)"
    ></v-text-field>
  </v-form>
</template>

<script>
export default {
  name: "Search",

  data: () => ({}),
};
</script>

List.vue

<template>
  <v-container>
    <v-row class="mt-5">
      <v-col cols="6">
        <div style="display: flex">
          <div class="mx-4">
            <v-icon color="black">mdi-card-account-details-outline</v-icon>
          </div>
          <div>
            <h2>Listado de Pacientes</h2>
            <p style="color: grey">Visualizacion de pacientes</p>
          </div>
        </div>
      </v-col>

      <v-col cols="6">
        <Search @updateSearch="searchText = $event"/>
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12">
        <CardList :search="searchText"/>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
// Componentes vista principal
import Search from "../components/Search";
import CardList from "../components/CardList";

export default {
  name: "List",
  data() {
    searchText: '',
  },
  components: {
    Search,
    CardList,
  },
};
</script>