Advertisements Here is a simple carousel <template> <div ref="wrapperRef" class="js-carousel container"> <div class="row"> <slot></slot> </div> <div class="row"> <template v-for="n in noOfSlides" :key="n"> <span style="margin-right: 25px;" @click="console.log(n)">O</span> </template> </div> </div> </template> This works using Options API. The noOfSlides is properly getting changed and the for-loop re-renders after mounting export default { name: ‘carousel’, data() { return… Read More Using ref() not reacting to reassignments – composition API

Advertisements I want to use dynamic component functionality with Composition API in Vue3. I have no problem with Options API. I followed this instruction: link There is my code: <script setup> import { ref } from "vue"; import General from "../components/ContractGeneral.vue"; import Networks from "../components/ContractDetails.vue"; const tabs = { General, Networks, }; let currentTab =… Read More Vue3 how to implement dynamic components with Composition API?

Advertisements I am trying to learn composition API and move away from options api as vue3 seems to be moving towards it. I am doing a simple example where a user enters in an input box the ticker and then the number of shares in the input box next to it. When you click off… Read More Deleting an array item in Composition API

Advertisements I have the following function being passed as an emit to the component: setTray(tray, pk) { alert(tray) alert(pk) }, Calling inside a component, I am able to reach the function, but not the arguments: setup(props, ctx) { ctx.emit(‘setTray’, ‘profile-task’, pk) ctx.emit(‘setTray’, {tray: ‘profile-task’, pk: pk}) } Both approaches result in the arguments being undefined… Read More How do I emit multiple arguments via setup()?

Advertisements Can i use multiple vue composables in one file? example: <script> export function arrayToInt(arr) { … } export function arrayToUint(arr) { … } </script> then somewhere else: import {arrayToInt, arrayToUint} from "./useBytesHelper" because im getting a vue router parsing error right at the beggining when loading my app. and i might be doing this… Read More Can i use multiple Vue Composable functions in one file? how do I structure it?

Advertisements I’ll preface this question by saying I’m very new to the composition API so I’m still trying to figure out the best practices. I’m writing a useResizeObserver composable function using Vue’s composition API in order to track dimension changes on a target element. Because I have to wait for the element to be mounted,… Read More Passing element to composable function in Vue composition API?

Advertisements Hi I’m new with Typescript. I’ve toggled two tags multiple times just in Vue, but now for the first time I’m doing it with Typescript. In console log i see changes (true <–> false), but p tag is always the same. <script lang="ts"> export default defineComponent({ inheritAttrs: false, }) </script> <script lang="ts" setup> let… Read More How to toggle two tags with Vue and Typescript?

Advertisements I am trying to make a simple page that has a handful of tabs which show different content, using dynamic components with the <component> tag. I recently learned about Composition API and wanted to try it out, but it is giving me some problems. App.vue: <template> <page-header :tabs="allTabs" @change-tab="changeTab"></page-header> <component :is="activeTab"></component> </template> <script setup>… Read More Vue.js <component> tag not loading imported components; using Composition API

Advertisements I’m refactoring some of my components using the composition API. I’m having problems with one component with asynchronous state trying to get data from one of it’s getters. The original component with the options API: export default { computed: { …mapGetters({ incomingChats: "websocket/getIncomingChats", agentId: "token/getAgentId", }), }, methods: { …mapActions({ addChatSession: "chatSession/addChatSession", }), assigningChatToAgent(chatId)… Read More Vue 3 Composition API using getters