Im trying the <script setup> syntax in vue and wondering why reactivity is not working. What’s wrong here? <template> <button @click="changeButtonText">{{ buttonText }}</button> </template> <script setup> import { ref } from ‘vue’ let buttonText = ref("Foo") function changeButtonText() { buttonText = "Bar" } </script> Tried without ref(). Tried with buttonText = ref("Bar"). No effect >Solution… Read More Vue <script setup> reactivity not working

I am trying to use different class based on true or false. Here’s my approach: if(i == 0) assign class name d-block, else assign class name d-none <div class="card :v-if=’steps == 1 ? d-block ? d-none’"> </div> >Solution : Try doing this instead <div :class="{card: ‘steps === 1’ ? ‘d-block’ : ‘d-none’}"></div>

props:{ variants:{ type: Array, default: [] } options:{ type: Array, default: [] }, }, data(){ return{ item:{ quantity: 1, options: this.options, }, } }, I have a problem with this code: When i change item.options value also options get changed because as i understand, i am just assigning a reference to options. How to create… Read More How to create a new object instead of assigning a reference to the existing object in `Vue3 Option Api`

I have the following code for updating the number of seconds elapsed and displaying it: <template> <div> {{timerValue}} </div> </template> <script> export default { name: "App", components: { }, data() { return { timerValue: "" } }, created() { let seconds = 0; this.timerValue = seconds; setInterval(function() { seconds++; }) } }; </script> However the… Read More Vue: timer value doesn't update when using setInterval

There are npm init vue@latest and npm create vue@3 to scaffold new Vue project. I know there is a command that re-initializes the scaffolding command so you can add, for example, TypeScript or Cypress. Can’t find it even though I remember I pulled it off once, but can’t remember how I did it. Any help… Read More How to re-initialize Vue 3 scaffolding

So, the problem is that my Vue app was working just fine last night, i turned of the server and went to sleep, nothing was changed or updated and i woke up this morning wanted to continue what i was doing and go for the yarn serve to open it up, and i got the… Read More Vue app not working day after working normaly

I’m trying to create an add to card button but I’m stuck on the count going negative,basically when we click on remove item at value zero its goes negative(-1) since I have just started learning vuejs and this is totally new to me so any help would be apreciated! <script> export default { data() {… Read More how to stop the count from going negative when the value is zero?

I want to create context menu. By the nature of the contextmenu depending on the location of usage the entries differ. Therefor I am trying to create a Vue.js 3 component that allows a list to be defined within its innerHtml, rather than passing the list as a prop. A example usage I have in… Read More Vue3 component with list definition in inner html

I have two components – parent and child. The child emits an event, which should trigger a console output in a parent component. However nothing is printed in console. TestPage.vue: <template> <div v-on:hidden="hiddenEvent"> <TestComponent></TestComponent> </div> </template> <script> import TestComponent from "@/app/test/TestComponent"; export default { name: "TestPage", components: {TestComponent}, methods: { hiddenEvent() { console.log("hiddenEvent"); } }… Read More Vue can't receive subscribe to event from child component in to parent component

I have this super simple vue3 App, it works kinda like a to-do app, you add an item, and it pushes into an Array which is displayed in Screen. I set a <input/ type="text" with a v-model="" and made a computed which works over that array. The logic is very simple, it has a .filter… Read More Why is this computed() supposed to filter a listof items if anything is writen in a text input not working?