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, I… Read More Passing element to composable function in Vue composition API?

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 checked… Read More How to toggle two tags with Vue and Typescript?

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> import… Read More Vue.js <component> tag not loading imported components; using Composition API

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

I’m starting my transition from options api to compositon api in vue. And I have the following block of code where I’m trying to implement 2 way bind. I’m using ant-design-vue library for slider input. And trying to bind the slider value to input field. <template> <div> <a-row> <a-col :span=”12″> <a-slider v-model=”inputValue1″ :min=”1″ :max=”20″ />… Read More Two way form data binding in vue 3 composition api

in Vue3 composition API, I have 2 arrays const fruitsSellerPrice = [ {id: 1, name: apple, priceSeller: ‘10.90’}, {id: 2, name: banana, priceSeller: ‘11.20’}, {id: 3, name: orange, priceSeller: ‘12.30’}, {id: 4, name: framboesa, priceSeller: ‘13.90’}}]; const fruitsBuyPrice = [ {id: 1, name: apple, priceBuy: ‘6.90’}, {id: 2, name: banana, priceBuy: ‘6.20’}, {id: 3, name:… Read More I have two arrays if "Cost" and "Sell" price about many fruits. How calculate the diference using a "smart" function filter and map?

I create a watcher within the setup, this works: watch(() => variableToWatch, (newVal,oldVal) => { console.log(newVal,oldVal) }) But this does not (no errors, just doesn’t seem to do anything): const fnTest = (newVal,oldVal) => { console.log(newVal,oldVal) }) watch(() => variableToWatch, (newVal,oldVal) => fnTest) Can we not use a function in the watcher callback? To be… Read More Can we use a named function in the Vue3 composition API watcher?