Advertisements I am still a beginner in vue. I am using vue.js 3 SFC composition api. I have the following code: <a href="#" @click.prevent="alert(‘default action prevented’)">A link with prevent default</a> When I click the link, I expect the alert box to appear, but I get the following error: _ctx.alert is not a function render/_cache[2]<@webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=template&id=7ba5bd90:19:106 withModifiers/<@webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:1632:12… Read More alert() function not working on click event in vue.js

Advertisements 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([])… Read More Accessing vue composable instance in function?

Advertisements 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 More Change in vue composition api

Advertisements 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… Read More Redirect user to an external website using VueJs 3

Advertisements 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"… Read More Vue 3: Why can I not set two ref's with the same object

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?