# Keep soft-deleted rows off a Vue index

> SoftDeletes hides deleted rows from a normal query. Do not filter them again in Vue.

- URL: https://laravel-vuejs.space/laravel-soft-deletes-index-vue
- Author: Anass Ez-zouaine (https://laravel-vuejs.space/author/anass-ez-zouaine)
- Published: 2026-10-11
- Topics: Laravel, VueJs

People searching “Laravel soft deletes Vue” delete a row, see it disappear, and then also filter `deleted_at` in the component. The trait already did the filter. The [CRUD guide](https://laravel-vuejs.space/laravel-inertia-vue-crud) is the destroy action.

> **TL;DR**
>
> -   SoftDeletes hides deleted rows from a normal query.
> -   Do not filter them again in Vue.
> -   Do not pass trashed rows to the public index and hide them with `v-if`.
> -   Do not call `forceDelete()` from the button you labeled Delete.
>
> **Who it's for:** Laravel + Vue developers
>
> **Applies to:** Laravel 13 · Vue 3

## The fix

```php
use Illuminate\Database\Eloquent\SoftDeletes;

class Post extends Model
{
    use SoftDeletes;
}
```

The migration needs a nullable `deleted_at` timestamp. `$post->delete()` sets it. `Post::query()->paginate(12)` does not return that row. The Vue list renders `posts.data` and does not know about the column.

A trash screen is the exception. `Post::onlyTrashed()->paginate(12)` is an admin page with its own [policy](https://laravel-vuejs.space/laravel-vue-policies). Do not pass trashed rows to the public index and hide them with `v-if`.

## What to avoid

> **Gotcha**
>
> Do not call `forceDelete()` from the button you labeled Delete. That removes the row. Soft delete is the one you can restore.

## FAQ

**Q: How do I keep soft-deleted rows off a Vue index?**

SoftDeletes hides deleted rows from a normal query. Do not filter them again in Vue.

**Q: What goes wrong with Laravel soft deletes Vue?**

Many developers delete a row, see it disappear, and then also filter `deleted_at` in the component. Do not pass trashed rows to the public index and hide them with `v-if`.