Lets say I have a simple vue composable function which I’d like to reuse many times throughout my app. In this case, it’s got one reactive property (products, an array containing a list of products), and one method "addProduct" which pushes a new element to the array. export function useCart(){ const products = ref([]) const… Read More Accessing vue composable instance in function?
I try to emit value change in new Vue Composition Api, like this <template> <select @change="handleChange()" > <option value="text">Text</option> <option value="image">Image</option> </select> </template> <script lang="ts"> export default { name: "Select", setup(props, { emit }) { const handleChange = (event: any) => { emit("customChange", event.target.value); }; return { handleChange, }; }, }; <script/> Return Cannot read… Read More Change in vue composition api
I built a navigation bar that should redirect users to external social media links. Here you can see the url I get after I clicked on the GitHub link and the following errors. <template> <nav> <ul> <li v-for=”link in links” :key=”link”> <link-atom :to=”link.path”> {{ link.name }} </link-atom> </li> </ul> </nav> </template> <script setup> import LinkAtom… Read More Redirect user to an external website using VueJs 3
The problem: Whenever I try to set two ref variables with the same Object they will share the same reactivity inside of the component. When I click the checkbox ref1.test and ref2.test will change both, while the v-model is only for ref1.test App.vue <template> ref1: {{ ref1 }} ref2: {{ ref2 }} <input type="checkbox" v-model="ref1.test"… Read More Vue 3: Why can I not set two ref's with the same object
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
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 = ref("Networks");… Read More Vue3 how to implement dynamic components with Composition API?
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 it… Read More Deleting an array item in Composition API
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 when… Read More How do I emit multiple arguments via setup()?
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 wrong… Read More Can i use multiple Vue Composable functions in one file? how do I structure it?
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?