[Vuejs]-How to access "Id" in vue.js script

by

2👍

✅

In JS, we select item and manipulate it. In Vue, we say items how it should react some changes and let everything run. In rare cases, selecting an object and changing its state can be necessary, but in your case, you should use computed property:

<span id="cm_count" ref="cm_count" :syle="spanStyles">
    ({{ c_count }})
</span>


computed: {
  spanStyles() {
    return `color:${this.c_count > 5 ? 'red' : 'black'}`;
  }
}

UPDATE AFTER COMMENT

Buttons don’t have href attribute. That’s why I assume you have a link.

<a href="linkTo" @click="doSomething">...</a>


data() {
  return {
    isButtonClicked: false
  }
},
methods: {
  doSomething() {
    // you don't need to set a timeout here,
    // but if it goes to the wrong link,
    // you can use it to delay the changing of the link.
    setTimeout(() => this.isButtonClicked = !this.isButtonClicked, 10
  }
},
computed: {
  linkTo() {
    return this.isButtonClicked ? 'link1.com' : link2.com;
  }
}

Leave a comment