In my vue file, my template has a div which uses v-for on an "items" array to load each element of the array visually. I have the "items" array defined in setup() using the composition API, and I return "items" in setup. Even with all this, when I try to render or load the page,… Read More Vue3 setup variable not declared when accessing in template
I have a parent component Search that passes the prop query to a child component Results. Search.vue <template> <div> <input v-model="query" type="text" /> <Results :query="query" /> </div> </template> <script> import { defineComponent } from "vue"; import Results from "./Results.vue"; export default defineComponent({ name: "Search", components: { Results }, data() { return { query: "", };… Read More Watcher is only fired once when watching prop in Vue3 composition API
I have two requests to the server. The first one at the initial rendering of the page, the second one – by the "Show more" button. request 1: const getAllNews = () => { fetch(`${BASE_URL}`) .then(response => response.json()) .then(data => { allNews.value = data.items totalPages.value = data.nav.total }) .catch(err => console.error(err)); } request 2: const… Read More Two similar requests, how to improve?
I’m currently undertaking a rewrite of our components that are currently written with the Options API. One interesting point for a rewrite from a code-cut standpoint is our many modals, which all have their own closing/opening and boolean logic attached everywhere they’re present. My issue is that I’m having a hard time figuring out how… Read More Multiple composable instances within a single script tag in Vue 3
There is an items. With two selection options "size" (large, small) and quantity (2/4/6) each. When select each option, need to display in the header what is selected (let’s say small and 4). By clicking the "add to storage" button, it will add it to the storage, on another page it will display a list.… Read More Push object to array, composition api
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 callWithErrorHandling@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:290:18… Read More alert() function not working on click event in vue.js
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