Форум

Sergey1986 · #1 (**permalink**) 07.12.2018, 16:03

Добрый день! Подскажите...
есть массив
в таком ввиде (из консоли)
0: {events_id: "1", events_client_id: "1123", events_title: "123", events_description: null, events_worker_id: null, …}
1: {events_id: "2", events_client_id: "2", events_title: "123", events_description: null, events_worker_id: null, …}
и т.д.

как его запихнуть в vuejs и отображать список
напишите пару примерчиков!!!

перерыл весь инет...везде все в явном ввиде указано!!!(((((
Заранее спасибо!

рони · #2 (**permalink**) 07.12.2018, 18:11

Sergey1986,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

</head>

<body>
<div id="app">
   <ul>
            <li v-for="el of ar">
                <div v-for="(value, key) of el">{{key}} : {{value}}</div>
            </li>
   </ul>

</div>
  <script>
const app = new Vue({
  el: "#app",
  data: {
    ar: [{events_id: "1",events_client_id: "1123"},{events_id: "2",events_client_id: "2"}]
  }
});
  </script>
</body>
</html>

Dilettante_Pro · #3 (**permalink**) 07.12.2018, 18:41

Может, что-то вроде этого?

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

</head>

<body>
<div id="app">
   <ul>
            <li v-for="el in ar">
                {{ stringValues(el) }}
            </li>
   </ul>

</div>
  <script>
var arrTest = [{events_id: "1", events_client_id: "1123", events_title: "123", events_description: null, events_worker_id: null},{events_id: "2", events_client_id: "2", events_title: "123", events_description: null, events_worker_id: null}];
const app = new Vue({
  el: "#app",
  data: {
    ar: arrTest
  }
});
function stringValues(obj) {
 var str = "";
  for (key in obj) {
     str += " " + obj[key];
  }
  return str;
}
  </script>
</body>
</html>

рони · #4 (**permalink**) 07.12.2018, 18:58

Dilettante_Pro,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

</head>

<body>
<div id="app">
   <ul v-for-object>
            <li v-for="el in ar">
                <span v-for="v in el">{{ v+"" }} </span>
            </li>
   </ul>

</div>
  <script>
var arrTest = [{events_id: "1", events_client_id: "1123", events_title: "123", events_description: null, events_worker_id: null},{events_id: "2", events_client_id: "2", events_title: "123", events_description: null, events_worker_id: null}];
const app = new Vue({
  el: "#app",
  data: {
    ar: arrTest
  }
});

  </script>
</body>
</html>

Sergey1986 · #5 (**permalink**) 08.12.2018, 17:23

Всем спасибо! буду пробыать! (хотя проглядел все это, ведь и я так и дела как по документации..ю!

Форум

Справочник

Discord чат

Курсы javascript