Why can't I set the text color of this span element to white

April 29, 2022

Simply put, I want to change the color of the first two texts of each line to white, but it doesn’t work anyway. It is as if the span elements generated by js cannot be affected by css.
Please see the picture for the specific code.

Sorry I’m not very good at using Stack Overflow yet, the code has been added.

enter image description here

export default {
  mounted(){
    console.log("Hello!")
    let list = document.querySelectorAll('.shinchou-menu li a')
    list.forEach( link => {
      let letters = link.textContent.split("");
      link.textContent = "";
      letters.forEach((words, i) => {
        let span = document.createElement("span");
        span.textContent = words
        if(i < 2){
          span.className = "highlight"
        }
        span.style.transitionDelay = `${i/10}`
        link.append(span);
      })
    })
  }
}

<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #fafafa;
}
</style>

<style lang="less" scoped>
.shinchou-menu {
  --heightlight-text-color: #00ACF0;
  list-style: none;

  li {    
    a {
      text-decoration: none;
      display: inline-flex;
      background: #000;
      font-size: 1.6em;
      font-weight: 700;
      color: var(--heightlight-text-color);
      padding: 4px;
      margin: 6px 0;
  
      span.highlight {
         color: #FFF;
      } 
    }
     

  } 
}
</style>

<template>
  <div>
      <ul class="shinchou-menu">
        <li><a href="#">ニュース</a></li>
        <li><a href="#">ストーリー</a></li>
        <li><a href="#">スターフ＆キャスト</a></li>
        <li><a href="#">キャラクター</a></li>
        <li><a href="#">放送·配信情報</a></li>
      </ul>
  </div>
</template>

>Solution :

Don’t manipulate DOM directly!

Vue keeps a separate DOM structure (called virtual DOM) where it tracks all elements for reactivity. Whenever something reactive changes, the DOM node in the actual DOM of the page gets re-rendered. Why? Because it’s a lot faster than tracking changes in DOM.

What this means is that whenever you change DOM directly, you will lose those mods whenever Vue re-renders.

You are supposed to handle your data in the component and allow Vue to render it using template structural directives (v-if, v-for, etc…).

If you would like me to demo how your component should be written (the Vue way), consider adding your code as code. I won’t re-type it from a picture.

Simple, generic example:

new Vue({
  el: '#app',
  data: () => ({
    items: [
      { name: 'one' },
      { name: 'two', highlighted: true },
      { name: 'three' }
    ]
  })
})

.highlighted { color: red }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="item in items"
        :class="{ highlighted: item.highlighted }"
        v-text="item.name" />
  </ul>
</div>