I want to display data in my Vue.js 3 app without using a loop. Here is the response from my Axios API: In My Axios Api I got reponse:
[{id: 2, name: "sub_title", value: "The Best Developer Team", created_at: null, updated_at: null},…]
0
:
{id: 2, name: "sub_title", value: "The Best Developer Team", created_at: null, updated_at: null}
1
:
{id: 3, name: "title",…}
2
:
{id: 4, name: "description",…}
3
:
{id: 5, name: "button_text", value: "Get Started", created_at: null, updated_at: null}
4
:
{id: 6, name: "video_text", value: "How We Works", created_at: null, updated_at: null}
5
:
{id: 7, name: "video_url", value: "#video", created_at: null, updated_at: null}
6
:
{id: 8, name: "url", value: "/frontend/assets/img/hero/1667138531.png", created_at: null,…}
7
:
{id: 9, name: "image", value: "1667138531.png", created_at: null, updated_at: null}
And Vuejs Component:
axios.get('/api/sites/hero').then(response => {
this.heros = response.data.map(obj => {
let hero_data = {};
hero_data[obj.name] = obj.value;
console.log(hero_data);
return hero_data;
})
}).catch(function (handleError) {
console.log("Error: ", handleError);
}, []);
And my console log displays:
{sub_title: 'The Best Developer Team'}
{title: 'We Are the Brilliants Creative Secure Maintain Build in Terms of website Development'}
{description: 'End-to-end payments and website management in a si…le solution. Meet the right team to help realize.'}
{button_text: 'Get Started'}
{video_text: 'How We Works'}
{video_url: '#video'}
{url: '/frontend/assets/img/hero/1667138531.png'}
{image: '1667138531.png'}
Now I am trying to print {{heros.title}} in my div, but it's not working.