I have a variable that contains an array:
https://i.sstatic.net/OQfB9.png
My goal is to create a foreach loop and display all the key's and script_content's in the view.
This is my Vue component's mounted method:
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!',
});
});
},
Here is the structure of the component data:
data: () => ({
errors: {},
key: [],
scriptContent: [],
While I can display values from the first array, I am unsure of how to utilize a foreach loop with an associative array.
Here is the HTML structure:
<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>
The ultimate objective is to list all the key's and script_content's within an HTML list or div.
Any assistance would be greatly appreciated.