How to set css dynamically in v-for?

Question

After consulting the VUE official website and many other places still can not find a better solution, I hope to get help, thanks for all

            <div class="tag-item" :ref="`tagItem_${index}`">
              <el-tooltip effect="dark" :content="tag.name" placement="top">
                <el-link :underline="false" class="title" @click="getPostByTag(tag)">
                  <el-image :src="tag.img" style="height: 32px; z-index: 99; width: 32px" lazy />
                  <span class="content" :id="`content_${index}`" :class="judgeScroll(index)">{{
                    tag.name
                  }}</span>
                </el-link>
              </el-tooltip>
            </div>

const tagItem_0 = ref()

const judgeScroll = (index) => {
  nextTick(() => {
    // console.log(tagItem_0.value[0].clientWidth)
    let contentWidth = document.getElementById(`content_${index}`).clientWidth
    // console.log(contentWidth)
    if (+contentWidth > +tagItem_0.value[0].clientWidth) {
      // console.log('==================')
      document.getElementById(`content_${index}`).classList.add('scroll')
      return 'scroll'
    }
  })
}

.tag-list {
  margin: 10px;
  min-height: 32px;
  min-width: 10%;

  .tag-item {
    width: 100%;
    padding: 1%;
    max-width: 100%;

    .title {
      color: #262626;
      display: block;
      line-height: 20px;
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      word-wrap: normal;
      max-width: inherit;
      align-items: center;

      .content {
        white-space: nowrap;
        overflow: hidden;
      }
      .scroll {
        animation: scrollText 10s linear infinite;
        @keyframes scrollText {
          0% {
            transform: translateX(30%);
          }
          100% {
            transform: translateX(-100%);
          }
        }
      }
    }
  }
}

In my imagination, when the text in span is too long, set CSS to slide it left and right. If I can successfully set the scroll style, this is successful.

If scroll is injected successfully, it should run like this. If the text is short, it will not be injected into scroll scroll example

I want to add a 'scroll' style to all <span> that is width than the parent node. When I try to write it below, the method executes the final log, but not the return 'scroll' style as expected, until I add the sentence classList.add.

I have two questions now. The first is that if I don't add nextTick,tagItem.value [0], null will appear, and the second is why there is no return 'scroll'.

In addition, when I use the above as a component, and two components appear at the same page, the style will be added to the first component at the same time. Is there a solution to this situation? Finally, thank you for reading the post. Any suggestions and criticisms are also welcome.

Answer 1

1.The judgeScroll function will run at 'beforCreate lifecycle' in the first time,and this time the dom is not yet created,so the tagItem_0.value[0] is null 2. There is no return value in judgeScroll ,your return is in a callback of nextTick, 3. Vue does not suggest use document Object,if you used, maybe your code needs to optimize 4. How about the style 'overflow: auto'

supplement: delete the judgeScroll function, change the style like this : .content {white-space: nowrap; overflow: auto;display: inline-block;width: calc(100% - 32px );} And if possible show your code on codepen so I can run it