How to get object from array in vue.js

Question

I would like to select object from array in Vue.js :

On pageload, the selectTitle() method is called. I just want to select object (for example i=2) in my array 'titleList'. But for now I just get the Observer in return. I know it's about kind of scope or bind but I'm really new in vue (and js !) so someone could help me ?

Thanks !

var vm = new Vue({
    el: '#titles',
    data: {
        titleList: [
            { title: 'Title1', details: 'details1', imgLocation:'', text: 'Lorem ipsum dolor sit amet.' },
            { title: 'Title2', details: 'details2', imgLocation:'', text: 'Lorem ipsum dolor sit amet.' },
            { title: 'Title3', details: 'details3', imgLocation:'', text: 'Lorem ipsum dolor sit amet.' },
            { title: 'Title4', details: 'details4', imgLocation:'', text: 'Lorem ipsum dolor sit amet.' },
            { title: 'Title5', details: 'details5', imgLocation:'', text: 'Lorem ipsum dolor sit amet.' }
        ],
    },
    mounted: function () {
        this.setTimer();
        this.selectTitle();
    },
    methods: {
        selectTitle() {
            i = 2;
            let currentTitle = this.titleList[i];
            console.log(i, currentTitle);
            return currentTitle;
        },

Philip Feldmann · Accepted Answer · 2018-04-10 10:14:29Z

1

That's perfectly normal and exactly what you want to happen. Vue wraps every object into an observable automatically for you, so that when your data changes, all data-bindings in view update automatically without you having to do anything. Don't worry about it, this works as a proxy, you can manipulate this object just normally. For example:

currentTitle.title = 'Changed title'

Will update the correct attribute and if you have a reference in your view, even update your view automatically without you having to worry about anything. That's the great thing about Vue.

Here's a codepen example taking your code a bit further, hope that helps understanding: Codepen Example

answered Apr 10, 2018 at 10:14

Philip Feldmann

8,5037 gold badges47 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get object from array in vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related