What could be causing my icon to not update when I click on it? (ionic/vue/ts)

Hey there, I'm having trouble changing my icon on click and I can't figure out why. Here's the template I'm using:

<button>
  <ion-icon class="marge-image" :icon="onChange ? heart : heartOutline" @click="onChange = !onChange"></ion-icon>
</button>

And here's the script where I set onChange to false and imported my icons (which display correctly except when I try to change the icon on click):

import { heart, heartOutline } from "ionicons/icons";

export default defineComponent({
  components: {
    IonLabel,
    IonAvatar,
    IonGrid,
    IonIcon,
    IonCol,
    IonRow,
  },
  setup() { 
    return { displayDate , heart, heartOutline, onChange: false };
  },
});

Answer №1

Your onChange is set as a literal false, which means it is not reactive.

To make it reactive, wrap the value in a ref like this:

import { ref } from 'vue'

export default {
  setup() {
    return {
      //onChange: false ❌ not reactive

      onChange: ref(false) ✅
    }
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to smoothly glide to the bottom of a chat box by scrolling synchronously

I am currently in the process of developing a chat application. Each time a user sends a new message, it is added to a list of messages displayed in an unordered list (ul). I have successfully made the ul scrollable, but unfortunately, when a new message i ...

Altering the properties of a specified element within TestBed using the overrideComponent method

We are implementing TestBed.overrideComponent() to substitute a component with custom behavior. TestBed.overrideComponent(CoolComponent, { set: { template: '<div id="fake-component">i am the fake component</div>', sel ...

The npm operation completed successfully, however the terminal process came to a halt due to reaching the

I've been diving into learning Vue js and encountered a strange issue when attempting to run npm run watch. Initially, it shows Build successfully, but then the terminal process abruptly stops with an error message: Error from chokidar (/var/www/htm ...

Issue with Angular not rendering data retrieved from HTTP response

In my Service script class, I have defined a HomeApiService with the following code: export class HomeApiService{ apiURL = 'http://localhost:8080/api'; constructor(private http: HttpClient) {} getProfileData():Observable<HomeModelInterface[ ...

Having trouble with Vue.js? My simple program isn't displaying any output

Just diving into the world of Vue.js, I've been learning it recently. However, this basic code snippet isn't displaying any output. Can someone please provide assistance? <html> <head> <title>Vue Js | Learning Journey </titl ...

Testing abstract class methods in Jest can ensure full coverage

In my project, I have an abstract generic service class. export default abstract class GenericService<Type> implements CrudService<Type> { private readonly modifiedUrl: URL; public constructor(url: string) { this.modifiedUrl = ...

What is the best way to display the currently selected value in a Vue select drop down?

Is there a way to make the selected item in a custom component dropdown appear, similar to this Vue.js question? I have debug output within my single file component (SFC). <script> export default { props: ['modelValue', 'options&apos ...

Mastering data binding with Vue Js is a process that requires dedication and time

I'm a Vue JS beginner and I've created a component that repeats a grid-like section. However, I've noticed that adding a dropdown in the grid is causing a significant increase in load time. As the number of records grows, the load time will ...

The Express API controller is unexpectedly receiving empty strings

I am encountering an issue where my API is receiving an empty string instead of the expected data when I send post requests with a single string in the body. Below are the client, server, and controller components involved: Function call (client): const ...

Why is `setTimeout(resolve)` necessary in my JavaScript promise for loading data?

Instead of simply copying example code from tutorials, I am challenging myself to grasp ES6 Promises by implementing them in a meaningful way within a real project. Below is the frontend Vue.js/axios code I created that effectively utilizes Promises to po ...

What is the best way to reference a component variable property within its template without explicitly stating the variable name?

Suppose my component is managing an instance of the following class: class Person { firstName: string; lastName: string; age: number; } Is there a way to directly reference its properties in the template like this: <p>{{firstName}}</p> & ...

Incorporate Vue JS Router for seamless redirection and page reloads

Recently, I encountered an issue with my Vue 3 app that consists of Login.vue and Home.vue files. After converting an admin HTML website to this Vue application, I noticed that my JavaScript functions only function properly after a page reload. Upon sett ...

Does Vuex have a feature similar to mapDispatchToProps in Redux for managing actions and state?

In a child component, I found myself using this.updateData() instead of this.$store.dispatch(), with the updateData function being inherited from its parent component. Does anyone know how to accomplish this? ...

Creating a versatile JavaScript/TypeScript library

My passion lies in creating small, user-friendly TypeScript libraries that can be easily shared among my projects and with the open-source community at large. However, one major obstacle stands in my way: Time and time again, I run into issues where an NP ...

Tips for obtaining the OneSignal playerID

When launching the app, I need to store the playerID once the user accepts notifications. This functionality is located within the initializeApp function in the app.component.ts file. While I am able to retrieve the playerID (verified through console.log) ...

Issue with Typescript in Material-UI's CardActionArea component attribute

The documentation for Material-ui's Buttons | Third party routing library explains the need to create an adapter to wrap a react-router-dom/Link component in a Button. Interestingly, attempting the same with a CardActionArea (which is labeled as a Bas ...

Vuex: action type not recognized:

I am currently facing an issue regarding how to dispatch actions in Vuex. I am developing an app and utilizing Vuex for state management. I am trying to dispatch the signin action in store/user.js from Login.vue, but unfortunately, it is not functioning as ...

Why is it that I am not receiving JSON data in my Angular application?

I am currently working on a class within a webapi public class ResponseObject { public int Success { get; set; } public string Message { get; set; } public object Data { get; set; } } Within my ASP.NetCore, I have the following method: publi ...

Typescript with Angular: Despite having 7 values in the map, Map.get is returning undefined

Why does Map.get always return undefined when using a number from a form element (extra1) in this code snippet? extraById = new Map<number,Extra>(); @Input() extra1: number = -1; formChanged(carConfigurationFormChanged : any) { const index ...

I find myself hindered by TypeScript when trying to specify the accurate constraints for getUserMedia

I'm having difficulty getting a screen to stream within my Angular 5 Electron application. I am utilizing the desktopCapturer feature provided by Electron. Below is an excerpt of my code: loadCurrentScreensource() { desktopCapturer.getSources({ ...