Created
April 26, 2026 20:28
-
-
Save ggorlen/6db6f9ccb97f4adaf2f25b854fdb36ba to your computer and use it in GitHub Desktop.
vue try array composables
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <div id="app"> | |
| <button @click="newConversation()"> | |
| New Conversation | |
| </button> | |
| <div v-for="(conversation, index) in conversations" :key="index"> | |
| <h3>Conversation {{ index + 1 }}</h3> | |
| <ul> | |
| <li v-for="message in conversation.messages" :key="message">{{ message }}</li> | |
| </ul> | |
| <button @click="addMessageToConversation(index, 'new message')"> | |
| Add Message to Conversation {{ index + 1 }} | |
| </button> | |
| </div> | |
| </div> | |
| <script src="https://unpkg.com/vue@3.4.31/dist/vue.global.prod.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@tanstack/vue-query@4.19.1/build/umd/index.production.min.js"></script> | |
| <script> | |
| const useConversation = () => { | |
| const messages = Vue.ref([]); | |
| //const queryInfo = VueQuery.useQuery("example", () => | |
| // fetch("https://jsonplaceholder.typicode.com/todos/1") | |
| // .then(res => res.json()) | |
| //); | |
| const addMessage = (newMessage) => { | |
| messages.value.push(newMessage); | |
| }; | |
| return { messages, addMessage }; | |
| }; | |
| const app = Vue.createApp({ | |
| setup() { | |
| const conversations = Vue.ref([useConversation(), useConversation()]); | |
| const newConversation = () => { | |
| conversations.value.push(useConversation()); | |
| }; | |
| const addMessageToConversation = (index, newMessage) => { | |
| conversations.value[index].addMessage(newMessage); | |
| }; | |
| return { conversations, addMessageToConversation, newConversation }; | |
| }, | |
| }); | |
| app.use(VueQuery.VueQueryPlugin); | |
| app.mount("#app"); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment