Closed
Description
Version:
@inertiajs/vue3
version: ^1.0.0
Describe the problem:
I have a very simple code that is working in a plain vue3 playground:
// App.vue
<script setup>
import { reactive } from 'vue'
import Child from './Child.vue'
const data = reactive({
assets: [
{
id: 1,
name: 'Foo'
},
{
id: 2,
name: 'Bar'
},
]
})
const handleNewAsset = (newAssets) => {
data.assets = newAssets
}
</script>
<template>
<Child :assets="data.assets" @update:assets="handleNewAsset" />
</template>
// Child.vue
<script setup>
import {ref} from 'vue'
const {assets} = defineProps({
assets: {
type: Array
}
})
const emit = defineEmits(['update:assets'])
const newName = ref('')
const add = () => {
assets.push({
id: assets.length + 1,
name: newName.value
})
}
const remove = (object) => emit('update:assets', assets.filter(asset => asset.id !== object.id))
</script>
<template>
<h1>Assets</h1>
<ul>
<li v-for="asset in assets" :key="asset.id"><strong>id:</strong> {{asset.id}} <strong>name:</strong> {{asset.name}} <button @click="remove(asset)">x</button></li>
</ul>
<input v-model="newName" />
<button @click="add">Add</button>
</template>
(You can find it here )
The exact same code is not working in an inertia environment. If you remove an assets from the list, in Inertia items are not removing.
Steps to reproduce:
laravel new bug
cd bug
- open
resources/js/Pages/Welcome.vue
- replace the content of
Welcome.vue
with the code fromApp.vue
- adjust the import
import Child from '@/Pages/Child.vue'
- create a new file
resources/js/Pages/Child.vue
- paste the content of
Child.vue
to it
Now add items and remove items. In the playground the code is working as expected. In Inertia the behavior is not working
Metadata
Metadata
Assignees
Labels
No labels