Hey! I want to implement some anchor links in vue with no library used

user_13380044 0
Viewed 71

Here is my code below. I know there is some specific library like vue-scrollto but I want to resolve this task with no library. I want to add isViewed true only in that certain link. But the problem is that when I clicked on links each object of that link has isViewed true instead of only one.I want it changes dynamically.

I would appreciate any help.

<template>
  <div class="anchors">
    <ul class="list">
      <li class="item" v-for="(link, index) in anchorLinks" :key="link.id">
        <a @click="goToSection(link, link.sectionId, link.id, index)" class="anchor__item-link"></a>
      </li>
    </ul>
  </div>
</template>

export default {
  name: "AnchorLinks",
  data(){
    return{
      anchorLinks: [
        {
          id: 1,
          sectionId: "work",
        },
        {
          id: 2,
          sectionId: "service",
        },
        {
          id: 3,
          sectionId: "partner",
        },
        {
          id: 4,
          sectionId: "partner",
        },
        {
          id: 5,
          sectionId: "partner",
        },
        {
          id: 6,
          sectionId: "partner",
        },
        {
          id: 6,
          sectionId: "partner",
        }
      ]
    }
  },
  methods: {
    goToSection(link, sectionId, id, index){
      const element = document.getElementById(sectionId);

      if (element) {
        link.isViewed = true;
        window.scrollTo({
          top: element.offsetTop,
          behavior: 'smooth'
        });

        console.log(id)
        console.log(index);
        console.log(this.anchorLinks)
      }
    }
  }
}
vue.js anchor
3 Answers

From what I can tell and from what you have given, I think you need to set the ids of each anchor link.

<a
    :id="link.sectionId"
    @click="goToSection(link, link.sectionId, link.id, index)"
    class="anchor__item-link"
></a>
user_128462420

You should ensure that each anchorLink initially has an isViewed property,

The documentation states:

Vue cannot detect property addition or deletion

<template>
  <div class="anchors">
    <ul class="list">
      <li class="item" v-for="(link, index) in anchorLinks" :key="link.id">
        <a
          @click="goToSection(link, link.sectionId, link.id, index)"
          class="anchor__item-link"
        ></a>
      </li>
    </ul>
  </div>
</template>

export default {
  name: 'AnchorLinks',
  data() {
    return {
      anchorLinks: [
        {
          id: 1,
          sectionId: 'work',
          isViewed: false,
        },
        {
          id: 2,
          sectionId: 'service',
          isViewed: false,
        },
        {
          id: 3,
          sectionId: 'partner',
          isViewed: false,
        },
        {
          id: 4,
          sectionId: 'partner',
          isViewed: false,
        },
        {
          id: 5,
          sectionId: 'partner',
          isViewed: false,
        },
        {
          id: 6,
          sectionId: 'partner',
          isViewed: false,
        },
        {
          id: 6,
          sectionId: 'partner',
          isViewed: false,
        },
      ],
    };
  },
  methods: {
    goToSection(link, sectionId, id, index) {
      const element = document.getElementById(sectionId);

      if (element) {
        link.isViewed = true;

        window.scrollTo({
          top: element.offsetTop,
          behavior: 'smooth',
        });

        console.log(id);
        console.log(index);
        console.log(this.anchorLinks);
      }
    },
  },
};
user_2892030

Without reinventing the wheel here, you basically need to remove the previous link.isViewed property each time you click a link.

One straightforward way to do this is to store another variable containing the active link, that you can update each time you click a new link. See simple example below (ignoring excess / cruft).

As an aside, I would consider not updating the isViewed variable at all and just storing the active link (similar to below) for reference wherever you need it.

<ul>
  <li v-for="link in anchorLinks">
    <a @click="goToSection(link)"></a>
  </li>
</ul>

export default {
  name: "AnchorLinks",
  data() {
    return {
      activeLink: null,
      // you're using an array here, lean on the index
      anchorLinks: [
        { id: "work" },
        { id: "service" },
        { id: "partner" },
      ],
    };
  },
  methods: {
    goToSection(link) {
      // remove the previous `isViewed` property
      if (this.activeLink) {
        delete this.activeLink.isViewed;
      }
      // update the active link
      this.activeLink = link;

      const el = document.getElementById(link.id);
      if (el) {
        // now this will be the only link with `isViewed = true`
        link.isViewed = true;
        window.scrollTo({
          top: el.offsetTop,
          behavior: 'smooth'
        });
      }
    }
  }
}
user_7202040
Related