Задать вопрос
@MaXX77777
vue

Добрый день! Как достучатся до определенного массива из объектов и до конкретного его свойства используя Axios и Vue js?

<body>
    <div id="app">
        <ul>
            <div v-for="messages in message">{{ messages.name }}</div>

        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.11.1/sass.min.js"></script>

    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: ''
            },
            mounted() {
                axios
                    .get('test.json')
                    .then(response => (this.message = response.data));
            }
        })
    </script>

</body>



есть файл test.json


[
    {
        "name": "Vasia",
        "age" : "33"
    },
    {
        "name": "Ulia",
        "age" : "31"
    },

    {
        "name": "Petia",
        "age" : "35"
    },
    {
        "name": "Sergey",
        "age" : "30"
    }
]


Хочу достучаться до 3-го объекта в массиве и вывести только его имя (name) на странице.

Пример: Петя

Но у меня выводит весь список имен. Как это исправить? Спасибо!
  • Вопрос задан
  • 119 просмотров
1 комментарий
Подписаться 1 Средний 1 комментарий
Решения вопроса 1
sergiks
@sergiks
♬♬
Так у вас вот же, выводится весь массив в цикле: 
<div v-for="messages in message">{{ messages.name }}</div>


Сделайте вычисляемое свойство, например: 
computed: {
  thirdName() {
    if (this.messages.length >= 3) {
      return this.messages[2].name;
    }
  }
},
и показывайте его, когда не пустое: <div v-if="thirdName">Имя: {{ thirdName }}</div>

P. S. вывод всего списка:
Ответ написан
7 комментариев
7 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Developer (Vue/Nuxt)
tactic.team
от 140 000 до 180 000 ₽
Frontend разработчик (Vue)
Creatium
от 150 000 ₽
😃 Frontend developer Vue 💻📱⌚️
Viletech • Москва
от 150 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Создать сервер VPS через wireguard
24 нояб. 2024, в 00:04
5000 руб./за проект
Добавить интеграцию оплаты Telegram Payments 2.0 в Mini App (React)
23 нояб. 2024, в 23:30
3000 руб./за проект
Нарисовать инфографику в 3-х вариантах
23 нояб. 2024, в 23:03
1 руб./за проект
Ещё заказы