Tengo un componente principal ( lista de elementos ) al que paso elementos desde una vista de PHP (Laravel/Blade). La lista de elementos consta de elementos de lista (componente secundario). Dentro de un elemento de lista, quiero modificar/eliminar este elemento específico. Después de activar la eliminación dentro del componente secundario, se emitirá un evento de regreso al componente principal donde el elemento finalmente se eliminará de la lista de elementos.

Parece que este enfoque no es reactivo. Si, en cambio, uso data() con algunos datos ficticios para los elementos de la lista de un accesorio que se completa a través de PHP, es reactivo.

¿Cómo puedo garantizar la reactividad de los props que se pasan a través de PHP?

Componente principal:

 <template> <my-list-item v-for="item of items" :key="item.id" :item="item" @remove="removed" ></my-list-item> <br /> </template> <script> import MyListItem from './my-list-item' export default { // parent component name: "my-list", components: { MyListItem }, data() { return { // this will work. items are reactive // items: [ // // { id: 1, message: 'foo' }, // { id: 2, message: 'bar' }, // // ] } }, props: { // not reactive, items come from PHP view (Laravel/Blade). items: { type: Array, default: undefined } }, methods: { removed: function (item) { _.remove(this.items, item); } } }; </script>

Componente hijo:

 <template> <!-- item stuff here (label, etc.) ... --> {{ item.message }} <!-- remove link --> <a href="#" @click="remove(item)">remove</a> </template> <script> // child export default { name: "my-list-item", props: { item: { type: Object, } }, emits: [ 'remove' ], methods: { remove: function (item) { this.$emit("remove", item); } }, }; </script>

Vista de PHP (list.blade.php):

 @extends('dashboard') @section('title', 'List items') @section('content') <my-list :items="{{ Session::get('items') }}"></my-list> @endsection