Skip to main content
Actualizando respuesta
Origen Enlace

Caso general (sin paquetes extras ni bibliotecas)

Con el paquete laravel-vue-datatable

Puedes usar la siguienteEn este caso tienes que hacer tus componentes hijo lo más genericos posibles, en el caso de demo para guiarte mejor.ButtonView:

<template>
  <div>
    <div class="row">
      <a v-bind:href="'/admin/users/'+data.id+'/edit'">
        <button :class="classes" title="Update">
          <span>
            <i class="fas fa-user-edit"></i>
          </span>
        </button>
      </a>
      <a href="#" @click="click(data)"> <!-- Usamos la función que pasamos -->
        <button :class="classes" title="Update">
          <span>
            <i class="fa fa-trash red"></i>
          </span>
        </button>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {},
    click: { // funcion que usaremos para pasar
      type: Function,
      default: () => {}
    },
    classes: {
      type: Object,
      default: () => ({
        'btn': true,
        'btn-primary': true,
        'btn-sm': true,
      }),
    },
  }
}
</script>

Mientras que en AllUser solo debes de especificar el handler dentro de columns:

<template>
  <div>
    <data-table
        :data="data"
        :columns="columns"
        @on-table-props-changed="cargar"
    ></data-table>
  </div>
</template>

<script>
import ButtonView from "./ButtonView";

export default {
  data() {
    return {
      tableProps: {
        search: "",
        length: 10,
        column: "id",
        dir: "asc",
      },
      columns: [
        { label: "ID", name: "id", orderable: true },
        { label: "Name", name: "name", orderable: true },
        { label: "Email", name: "email", orderable: true },
        {
          label: 'Acciones',
          name: '', orderable: false,
          handler: this.deleteUserById, // declaramos que función tomar al hacer click al ButtonView
          component: ButtonView,
        },
      ],
    };
  },
  created() {
    this.cargar(this.url);
  },
  methods: {
    deleteUserById(data) { // esta es la función que tiene la lógica.

      // llamamos a axios para borrar el id
      alert('delete user' + data.id)

      // recargamos la tabla
      this.cargar()
    },

    cargar(url = this.url, options = this.tableProps) {
      console.log(url, options)

      // sustituimos esto por la llamada a axios 'get'
      setInterval(() => this.data = {
        data: [
          { id: 1, name: "bob", email: "foos@bar" },
          { id: 3, name: "alice", email: "foo@bar" },
        ],
      },10)

    },
  },
};
</script>

Puedes usar la siguiente demo (que soluciona el caso de laravel-vue-datatable) para guiarte mejor.

Puedes usar la siguiente demo para guiarte mejor.

Caso general (sin paquetes extras ni bibliotecas)

Con el paquete laravel-vue-datatable

En este caso tienes que hacer tus componentes hijo lo más genericos posibles, en el caso de ButtonView:

<template>
  <div>
    <div class="row">
      <a v-bind:href="'/admin/users/'+data.id+'/edit'">
        <button :class="classes" title="Update">
          <span>
            <i class="fas fa-user-edit"></i>
          </span>
        </button>
      </a>
      <a href="#" @click="click(data)"> <!-- Usamos la función que pasamos -->
        <button :class="classes" title="Update">
          <span>
            <i class="fa fa-trash red"></i>
          </span>
        </button>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {},
    click: { // funcion que usaremos para pasar
      type: Function,
      default: () => {}
    },
    classes: {
      type: Object,
      default: () => ({
        'btn': true,
        'btn-primary': true,
        'btn-sm': true,
      }),
    },
  }
}
</script>

Mientras que en AllUser solo debes de especificar el handler dentro de columns:

<template>
  <div>
    <data-table
        :data="data"
        :columns="columns"
        @on-table-props-changed="cargar"
    ></data-table>
  </div>
</template>

<script>
import ButtonView from "./ButtonView";

export default {
  data() {
    return {
      tableProps: {
        search: "",
        length: 10,
        column: "id",
        dir: "asc",
      },
      columns: [
        { label: "ID", name: "id", orderable: true },
        { label: "Name", name: "name", orderable: true },
        { label: "Email", name: "email", orderable: true },
        {
          label: 'Acciones',
          name: '', orderable: false,
          handler: this.deleteUserById, // declaramos que función tomar al hacer click al ButtonView
          component: ButtonView,
        },
      ],
    };
  },
  created() {
    this.cargar(this.url);
  },
  methods: {
    deleteUserById(data) { // esta es la función que tiene la lógica.

      // llamamos a axios para borrar el id
      alert('delete user' + data.id)

      // recargamos la tabla
      this.cargar()
    },

    cargar(url = this.url, options = this.tableProps) {
      console.log(url, options)

      // sustituimos esto por la llamada a axios 'get'
      setInterval(() => this.data = {
        data: [
          { id: 1, name: "bob", email: "foos@bar" },
          { id: 3, name: "alice", email: "foo@bar" },
        ],
      },10)

    },
  },
};
</script>

Puedes usar la siguiente demo (que soluciona el caso de laravel-vue-datatable) para guiarte mejor.

Agregando el this
Origen Enlace

Puedes usar emitir un evento desde el componente hijo:

<template>
  <button @click="borra">Borrar {{ index }}</button>
</template>

<script>
export default {
  props: ["index"],
  emit: "delete",
  methods: {
    borra() {
      // Lanzamos el evento
      this.$emit("delete", this.index);
    },
  },
};
</script>

Y en el componente padre puedes responder al evento con: @[nombre del evento]:

<template>
  <div>
    List/Tabla
    <div v-for="(elem,index) in arr" :key="index">
      {{ elem }}
      <ButtonView :index="index" @delete="updateTable"/>
    </div>

  </div>
</template>

<script>

import ButtonView from "./ButtonView";

export default {
  components: {ButtonView},
  data() {
    return {
      // esta es una variable donde guardas los resultados de axios
      arr: ['a', 'b', 'c', 'd']
    }
  },
  methods: {
    updateTable(index) {

      // aquí se haría la llamada a axios
      // sería algo como axios.get('url').then(res => this.arr = res.data)
      this.arr.splice(index, 1)

    }
  }
}
</script>

Puedes usar la siguiente demo para guiarte mejor.

Puedes usar emitir un evento desde el componente hijo:

<template>
  <button @click="borra">Borrar {{ index }}</button>
</template>

<script>
export default {
  props: ["index"],
  emit: "delete",
  methods: {
    borra() {
      // Lanzamos el evento
      this.$emit("delete", this.index);
    },
  },
};
</script>

Y en el componente padre puedes responder al evento con: @[nombre del evento]:

<template>
  <div>
    List/Tabla
    <div v-for="(elem,index) in arr" :key="index">
      {{ elem }}
      <ButtonView :index="index" @delete="updateTable"/>
    </div>

  </div>
</template>

<script>

import ButtonView from "./ButtonView";

export default {
  components: {ButtonView},
  data() {
    return {
      // esta es una variable donde guardas los resultados de axios
      arr: ['a', 'b', 'c', 'd']
    }
  },
  methods: {
    updateTable(index) {

      // aquí se haría la llamada a axios
      // sería algo como axios.get('url').then(res => arr = res.data)
      this.arr.splice(index, 1)

    }
  }
}
</script>

Puedes usar la siguiente demo para guiarte mejor.

Puedes usar emitir un evento desde el componente hijo:

<template>
  <button @click="borra">Borrar {{ index }}</button>
</template>

<script>
export default {
  props: ["index"],
  emit: "delete",
  methods: {
    borra() {
      // Lanzamos el evento
      this.$emit("delete", this.index);
    },
  },
};
</script>

Y en el componente padre puedes responder al evento con: @[nombre del evento]:

<template>
  <div>
    List/Tabla
    <div v-for="(elem,index) in arr" :key="index">
      {{ elem }}
      <ButtonView :index="index" @delete="updateTable"/>
    </div>

  </div>
</template>

<script>

import ButtonView from "./ButtonView";

export default {
  components: {ButtonView},
  data() {
    return {
      // esta es una variable donde guardas los resultados de axios
      arr: ['a', 'b', 'c', 'd']
    }
  },
  methods: {
    updateTable(index) {

      // aquí se haría la llamada a axios
      // sería algo como axios.get('url').then(res => this.arr = res.data)
      this.arr.splice(index, 1)

    }
  }
}
</script>

Puedes usar la siguiente demo para guiarte mejor.

Origen Enlace

Puedes usar emitir un evento desde el componente hijo:

<template>
  <button @click="borra">Borrar {{ index }}</button>
</template>

<script>
export default {
  props: ["index"],
  emit: "delete",
  methods: {
    borra() {
      // Lanzamos el evento
      this.$emit("delete", this.index);
    },
  },
};
</script>

Y en el componente padre puedes responder al evento con: @[nombre del evento]:

<template>
  <div>
    List/Tabla
    <div v-for="(elem,index) in arr" :key="index">
      {{ elem }}
      <ButtonView :index="index" @delete="updateTable"/>
    </div>

  </div>
</template>

<script>

import ButtonView from "./ButtonView";

export default {
  components: {ButtonView},
  data() {
    return {
      // esta es una variable donde guardas los resultados de axios
      arr: ['a', 'b', 'c', 'd']
    }
  },
  methods: {
    updateTable(index) {

      // aquí se haría la llamada a axios
      // sería algo como axios.get('url').then(res => arr = res.data)
      this.arr.splice(index, 1)

    }
  }
}
</script>

Puedes usar la siguiente demo para guiarte mejor.