Как обратиться к элементу массива по его id? vue.js

Question

Есть массив:

state() {
    return {
    items: [...Array(8)].map((n, i) => ({
        id: `${i + 1}`
      }))
    }
   }

Мне нужно получить ссылку на элемент массива по его id, то есть обратиться к нему. Этот код пишу в let slide. Выводил slide в консоль - получил undefined, что подтверждает неверное обращение к элементу

getters: {
openSlide(state, n) {
      // Получение ссылки на элемент
      let slide = state.items[n.id]
      // Определение расстояния от начала страницы до нужного элемента
      let top = window.scrollY + slide.getBoundingClientRect().y;
      // Перемотка
      window.scrollTo(0, top)
    }
   }

Answer 1

const { createApp } = Vue
const { createStore } = Vuex

const store = createStore({
  state () {
    return {
      items: [...Array(8)].map((n, i) => ({
        id: `${i + 1}`
      }))
    }
  },
  getters: {
    openSlide: state => id => {
      let slide = document.getElementById(id);
      let top = window.scrollY + slide.getBoundingClientRect().y;
      window.scrollTo(0, top);
    }
  }
})

const app = createApp({
  data() {
    return {
      store: store
    }
  }
});
app.use(store);
app.mount('#app');

#app {
   min-height: 1000px;
}

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.global.js"></script>

<div id="app">
    <div v-for="item in store.state.items">
        <div :id="item.id">{{ item.id }}</div>
    </div>
    <br />
    Scroll to:
    <span v-for="item in store.state.items">
        <button @click="store.getters.openSlide(item.id)">{{ item.id }}</button>
    </span>
</div>

БЛОГ НА HUSL

Как обратиться к элементу массива по его id? vue.js

Ответы (1 шт):