Вопрос Запрос

[MentaL]

В общем, пытаюсь взять все строчки из базы данных и вывести их в меню
Но почему то не выходит

Код запроса

Спойлер: код

mp.events.add('log::SERVER', (player) => {   
    DB.query("SELECT date, text FROM log", [], function (err, rows) {   
      if (err) {   
        console.log(err);   
        return;   
      }
          
      if (rows.length > 0) {   
        let log = [];   
        for (let i = 0; i < rows.length; i++) {   
          const rowlog = {
            date: rows[i].date,
            text: rows[i].text, 
          };   
          console.log(rowlog); 
          log.push(rowlog); 
        }   
        player.call('log::CLIENT', log);
      } else {   
        console.log("Нет данных в таблицеlog");   
      }   
    });   
});

mp.events.add('log::CLIENT', (log) => {
    browser.execute(`Menu.log = ${log}`);
})

HTML и vue

<div class="player_info_title" v-for="log in newfilteredPlayers" :key="log.date">
                                Информация <span>{{ log.date }}</span> <span>{{ log.text }}</span>
</div>

log: [
            { date: '12.02.2023', text: 'информация' }
 ],

 

[kirillzver]

Немного отойду от твоего вопроса, начну с совета..
Избавляйся от использования стиля запросов к БД с колбэками.
Почитай что такое async/await и как его применять.
Для работы с SQL базами данных можно использовать ORM (тоже почитай что это такое) sequelize.

Что же касается конкретной проблемы, то, я думаю, что она в этом участке кода:

player.call('log::CLIENT', log);

У тебя переменная log представляет собой массив с элементами (например: [elem1, elem2, elem3])
player.call принимает два аргумента: название эвента и массив с параметрами, которые ты передаёшь.
Чтобы на клиенте получить этот массив первым аргументом, ты должен передать следующим образом:

player.call('log::CLIENT', [log]);

В таком случае у тебя на клиенте в первом аргументе "log" будет массив с данными.
А если разбирать то что у тебя сейчас приходит, то получается, что там только первый элемент массива (elem1).

В общем, мораль заключается в том, что не стоит забывать помещать передаваемые с помощью call значения в массив.

 

[MentaL]

Получилось, но почему то теперь передается только 1 строчка из базы данных
То есть, в html создается 1 строчка с датой, а вторая строчка с текстом ( но в базе данных, это все в одной строчке находятся)
Не получается сделать, чтобы 1 строчка из базы данных, передавалась в html как 1 строчка целиком
Объясняю очень плохо, но в общем на скринах вот так

https://imgur.com/SPKwU4f

 

[weazzylee]

Получилось, но почему то теперь передается только 1 строчка из базы данных
То есть, в html создается 1 строчка с датой, а вторая строчка с текстом ( но в базе данных, это все в одной строчке находятся)
Не получается сделать, чтобы 1 строчка из базы данных, передавалась в html как 1 строчка целиком
Объясняю очень плохо, но в общем на скринах вот так

https://imgur.com/SPKwU4f

Не понимаю как тебе кто–то может помочь когда из всего кода Vue ты показываешь только цикл?
Ну и кстати, вообще твой код со стороны сервера можно упростить:

Спойлер: server

mp.events.add("log::SERVER", (player) => {
  DB.query("SELECT date, text FROM log", [], function (err, rows) {
    if (err || rows.length < 1) {
      console.error(err ?? "Нет данных в таблице log");
      return;
    }
   
    const log = rows.map(row => (rowlog = { date: row.date, text: row.text }, console.log(rowlog), rowlog));
    player.call("log::CLIENT", [log]);
  });
});

И при передачи JSON подобных обьектов лучше их оборачивать в JSON.stringify, как то так:

mp.events.add('log::CLIENT', (log) => {
    browser.execute(`Menu.log = ${JSON.stringify(log)}`);
})

Ну то есть итоговый компонент должен выглядеть приблизительно так:

Спойлер: vue

<template>
  <div class="log-list">
    <div class="log-item" v-for="log in logs" :key="log">
      Информация <span>{{ log.date }}</span> <span>{{ log.text }}</span>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        logs: [],
      };
    },
    created() {
      if (!window.Menu) window.Menu = {};
      window.Menu.log = this.logs;
      // Отслеживаем изменения
      this.$watch(() => window.Menu.log, (newVal) => this.logs = newVal);
    },
    beforeDestroy() {
      delete window.Menu.log;
    },
  };
</script>