Currently facing a unique challenge and seeking input:
Within the 'App', utilize 'TestListItem' for odd item indexes and 'TestListBetterItem' for even indexes. The same index must be used for both components.
Initial attempts involved setting keys for each child component as odd and even, resulting in a duplicate key error. Looking to pass alternating values from two child components into a common parent component. Below is the complete code snippet:
App.vue
<template>
<div id="app">
<test-list-item>
</test-list-item>
<test-list-better-item>
</test-list-better-item>
</div>
</template>
<!-- <template #title>
I AM A HEADER
</template> -->
<!-- <template #footer>
I AM A FOOTER
</template> -->
<script>
import { TestBetterList, TestListItem, TestListBetterItem } from './components';
export default {
name: 'App',
components: { TestBetterList, TestListItem, TestListBetterItem },
data() {
return {
items: ['better-item-1', 'better-item-2', 'better-item-3']
};
},
// watch: {
// 'better-item-1': {
// handler: 'oddMethod',
// immediate: true,
// deep:true
// },
// 'better-item-2': {
// handler: 'evenMethod',
// immediate: true,
// deep: true
// },
// 'better-item-3': {
// handler: 'oddMethod',
// immediate: true,
// deep: true
// },
// },
methods: {
}
};
</script>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
TestListItem.vue
<template>
<div class="test-list-item">
<template v-for="(item, index) in items">
<slot>
<div :key="index">{{ item }}</div>
</slot>
</template>
</div>
</template>
<script>
export default {
name: 'test-list-item',
props: {
},
data() {
return {
items: ['better-item-1', 'better-item-2', 'better-item-3']
};
},
computed: {
},
mounted() {
},
created() {},
// methods: {
// oddMethod: function () {
// items[0]
// }
// }
};
</script>
<style scoped lang="scss">
.test-list-item {
color: purple
}
</style>
TestListBetterItem.vue
<template>
<div class="test-list-better-item">
<template v-for="(item, index) in items">
<slot>
<div :key="index">{{ item }}</div>
</slot>
</template>
</div>
</template>
<script>
export default {
name: 'test-list-better-item',
props: {
},
data() {
return {
items: ['better-item-1', 'better-item-2', 'better-item-3']
};
},
computed: {
},
mounted() {
},
created() {},
// methods: {
// evenMethod: function () {
// items[0]
// }
};
</script>
<style scoped lang="scss">
.test-list-better-item {
color: rgb(255, 145, 0)
}
</style>