0

Есть массив:

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)
    }
   }

Такой подход тоже вернул undefined

Массив

лог все плохо

10
  • [...Array(8)] - что это у Вас? Такая конструкция выведет 8 раз undefined 14 авг 2022 в 21:15
  • я так создал массив, который потом итерирую через v-for, получаю 8 дивов с уникальным id. Если обращаюсь по конкретному индексу все работает, но мне нужно обращаться не к статике(конкретному индексу или id), а к динамике(изменяемому id в зависимости от того, на какой заголовок кликнул. Если нужен весь код - могу предоставить 14 авг 2022 в 21:24
  • У вас массив объектов, значит получать нужно объект по условию: state.items.find(x => x.id === n.id)
    – Alex Krass
    14 авг 2022 в 21:49
  • Alex, к сожалению, такая конструкция так же выдает undefined, хотя идея с поиском объекта кажется правильной, возможно синтаксис нужен немного другой? приложил скрин кода 15 авг 2022 в 5:48
  • Тогда проверяйте, что у вас действительно хранится в объектах. Код из первой функции должен генерировать массив [{ id : "1" }, { id : "2" }, { id : "3" }, ...]. Судя по синтаксису в n должен прийти объект вида { id : "3"}. Сделайте console.log("params", state.items, n) и посмотрите, что там хранится на самом деле, возможно мои предположения не верны и код нужно будет подправить исходя из реальных данных - большая вероятность, что в n хранится что-то другое, а не объект.
    – Alex Krass
    15 авг 2022 в 7:11

1 ответ 1

0

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>

1
  • C небольшой адаптацией под мои компоненты все заработало! Спасибо вам огромное, очень сильно помогли, безумно рад) 17 авг 2022 в 7:34

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.