v-forで表示した要素をクリックしたときにスクロール位置を変更する方法

v-for で表示した要素をクリックすると、クリックした要素の位置まで表示位置を変更したく、調べて作りました。

v-for で表示するときに v-bind:id="['list_item_' + index]" として連番のid名を付与して、クリックしたときに clickScroll メソッドで位置を変更するようにしました。

JavaScriptもVue.jsも初学者で上記の方法しか思いつきませんでした。

みなさんは他の方法でやってるんですか？もっとスマートやる方法もありますか？

ご存知の方、教えてくださいm(__)m

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<style>
.list {
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.list_item {
  width: 33.333%;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  list-style: none;
  padding: 100px 30px;
  margin: 0;
  box-sizing: border-box;
}
</style>
<body>

<div id="app">

<ul class="list">
  <li class="list_item" v-bind:id="['list_item_' + index]" v-for="(item, index) in items" v-on:click="clickScroll(index)">
    {{ item.title }}
  </li>
</ul>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        items: [
            {
                title: 'タイトル：あああああああああ'
            },
            {
                title: 'タイトル：いいいいいいいいいい'
            },
            {
                title: 'タイトル：ううううううううう'
            },
            {
                title: 'タイトル：えええええええ'
            },
            {
                title: 'タイトル：おおおおおお'
            },
            {
                title: 'タイトル：かかかかかかかかかか'
            },
            {
                title: 'タイトル：きききききききききき'
            },
            {
                title: 'タイトル：くくくくくくくく'
            },
            {
                title: 'タイトル：けけけけけけけ'
            },
            {
                title: 'タイトル：ここここここここ'
            },
            {
                title: 'タイトル：さささささささ'
            },
            {
                title: 'タイトル：しししししし'
            },
            {
                title: 'タイトル：すすすすす'
            },
            {
                title: 'タイトル：せせせせ'
            },
            {
                title: 'タイトル：そそそそ'
            },
            {
                title: 'タイトル：たたたた'
            }
        ],
        targetElement: '',
        clientRect: '',
        y: ''
    },
    methods: {

      clickScroll: function(index) {

        this.targetElement = document.getElementById("list_item_" + index);

        this.clientRect = this.targetElement.getBoundingClientRect();

        this.y = this.clientRect.top;

        window.scrollTo(0, window.pageYOffset + this.clientRect.top);

        console.log(window.pageYOffset + this.clientRect.top);

      }

    }
});
</script>
</body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

idを振らずに、イベントのカレントターゲットでエレメントを取得したほうがすっきりするかなと。
私もVueを始めたばかりなので、ほかの方のご意見を聞いてみたいです。

html
1<body>
2<div id="app">
3  <ul class="list">
4    <li class="list_item" v-for="(item) in items" @click="clickScroll">
5      {{ item.title }}
6    </li>
7  </ul>
8</div>
9<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
10</body>

css
1.list {
2  width: 800px;
3  display: flex;
4  flex-wrap: wrap;
5  border-top: 1px solid #ccc;
6  border-left: 1px solid #ccc;
7  padding: 0;
8  margin: 0;
9  box-sizing: border-box;
10}
11.list_item {
12  width: 33.333%;
13  border-right: 1px solid #ccc;
14  border-bottom: 1px solid #ccc;
15  list-style: none;
16  padding: 100px 30px;
17  margin: 0;
18  box-sizing: border-box;
19}

javascript
1new Vue({
2  el: "#app",
3  data: {
4    items: [
5      {
6        title: "タイトル：あああああああああ"
7      }
8      /*以下略*/
9    ]
10  },
11  methods: {
12    clickScroll: function(e) {
13      let targetRect = e.currentTarget.getBoundingClientRect();
14      window.scrollTo(0, window.pageYOffset + targetRect.top);
15      console.log(window.pageYOffset + targetRect.top);
16    }
17  }
18});
19