Вывод данных из .json vue

Question

Есть файл json формата, который содержит поле "assocProducts": "клей для керамогранита; крестики; затирка для швов; плиткорез;; крестики для плитки; затирка для швов; плиткорез;" Требуется сделать на каждую элемент отдельную ссылку. Как я понимаю, нужно преобразовать строку в массив, а затем перебрать через v-for, но у меня не получается

<a href="#" class="url--link">подложка,</a>
                <a href="#" class="url--link">плинтус натуральный,</a>
                <a href="#" class="url--link">рулетка,</a>
                <a href="#" class="url--link"
                  >набор для укладки ламината,</a
                >
                <a href="#" class="url--link">ножовка по ламинату,</a>
                <a href="#" class="url--link"
                  >гель для стыков ламината Clic Protect.</a
                >

"assocProducts": "клей для керамогранита; крестики; затирка для швов; плиткорез;; крестики для плитки; затирка для швов; плиткорез;",

Answer 1

В JSON нужно передать ключ (к примеру ID), которые мы будем использовать для урлов.
Получить JSON в нашем приложении, используя Axios или Fetch API.
Полученные массив сохранить в data(), а затем распарсить его через v-for.
Создать компонент, в котором будет отображаться элемент после перехода по ссылке.
Подключить Vue Router и прописать роуты.

Выглядит это примерно так:

<template lang='pug'>
    article
        h1 List

        ul(v-else-if='items.length')
            li(
                v-for='item in items'
                :item='item'
                :key='item.id'
            )
                router-link(:to="`/item/${item.id}`")
                    img(:src='item.img' :alt='item.name' :title='item.name')

            // Здесь будет отображаться компонент с элементом списка, который вы пропишите в роутах
            router-view(
                :items='items'
            )

</template>

<script>

    export default {

        data () {
            return {
                items: [],
            }
        },
        created() {
            fetch('https://cors-anywhere.herokuapp.com/' + 'https://test-frontend-api.herokuapp.com/galaxies')
                .then(res => res.json())
                .then(items => {
                    this.items = items
                })
        },
    }
</script>

А сам компонент, в котором будет отображаться элемент, по которому мы перешли, будет выглядить так:

<template lang="pug">
    .modal
        .modal-content(
            v-for="(item,index) in items"
            v-if="index == id"
        )
            .modal-item
                img(:src='item.img' :alt='item.name' :title='item.name')

            .modal-desc
                p {{ item.name }}

</template>

<script>
    export default {
        props: {
            items: {
                type: Array,
                required: true
            },
        },
        computed: {
            id() {
                return this.$route.params.id-1
            },
        }
    }
</script>

Настройки роутов:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/item/:id',
            component: () => import('<Ваш компонент с открытым элементом списка>'),
        },
    ],
    linkActiveClass: '',
    linkExactActiveClass: 'active',
})

БЛОГ НА HUSL

Вывод данных из .json vue

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