Saya mencoba mengakses id="cm_count" ini di skrip vue.js dengan menggunakan "this.$refs.cm_count.innerText" tetapi saya tidak bisa mendapatkan output yang diperlukan. Jadi saya berjuang bagaimana menyelesaikan masalah ini. Jika saya melakukan kesalahan, beri tahu saya cara mengakses "Id" dan css ini di skrip vue.js
html

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

Apakah ini cara yang tepat untuk mengakses id "cm_count" di vue.js dan juga membutuhkan .css di skrip vue.js
vue.js

this.$refs.cm_count.innerText ='('+ count +')';
this.$refs.cm_count.css('color', '#DB0038');
-1
Shaik Salima 12 Mei 2021, 11:56

1 menjawab

Jawaban Terbaik

Di JS, kami memilih item dan memanipulasinya. Di Vue, kami mengatakan item bagaimana seharusnya bereaksi terhadap beberapa perubahan dan membiarkan semuanya berjalan. Dalam kasus yang jarang terjadi, memilih objek dan mengubah statusnya mungkin diperlukan, tetapi dalam kasus Anda, Anda harus menggunakan properti yang dihitung:

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


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

UPDATE SETELAH KOMENTAR

Tombol tidak memiliki atribut href. Itu sebabnya saya menganggap Anda memiliki tautan.

<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;
  }
}
2
Bülent Akgül 12 Mei 2021, 09:37