Как отобразить значения ассоциативного массива с vue. js? - PullRequest
Новая
       62

Как отобразить значения ассоциативного массива с vue. js?

0 голосов
/ 22 апреля 2020

У меня есть array:

enter image description here

И я хочу сделать foreach l oop и перечислить все key's & script_content's к виду.

Мой vue метод монтирования компонентов: 

mounted() {
        this.loading = true;
        axios.get('/app/json-ld/json-ld-settings')
            .then(res => {
                let data = res.data;
                console.log(data.scripts);
                this.key = data.scripts[0]['key'];
                this.scriptContent = data.scripts[0]['script_content'];
            })
            .catch(error => {
                this.loading = false;

                this.$notify({
                    group: 'notify',
                    type: 'error',
                    text: 'Something happened! Please refresh the page and try again or contact support!',
                });
            });
    },

данные компонента: 

data: () => ({
        errors: {},
        key: [],
        scriptContent: [],

Я могу отобразить значения первого массива, но не знаю, как сделать foreach l oop в ассоциативном массиве.

HTML: 

    <div class="py-3 d-flex flex-row justify-content-end align-content-end">
        <div class="pr-2">
            <h5>Key</h5>
            <span>{{key}}</span>
        </div>
        <div class="pl-2">
            <h5>Script content</h5>
            <span>{{scriptContent}}</span>
        </div>
    </div>

Цель состоит в том, чтобы перечислить все key's и script_content's в HTML списке или в разделе.

Любая помощь будет оценена.

Ответы [ 2 ]

1 голос
/ 22 апреля 2020

Вы можете просто использовать коды ниже: 


data() {
   return {
     keys: [],
     contents: [],
   }
}

...
for (let index in data) {
   this.keys.push(data[index].key);
   this.contents.push(data[index].script_content);
}
...

Затем вы можете использовать v-for в html кодах для использования ключей и содержимого.

1 голос
/ 22 апреля 2020

Вы должны сохранить все данные в данных, а не только data.scripts[0], а затем выполнить итерации по ним в шаблоне, используя директиву v-for. Вот несколько хороших примеров:

https://vuejs.org/v2/guide/list.html

...