如何从vue.js中的数组获取对象

Question

我想从Vue.js中的数组中选择对象：

在页面加载时，将调用selectTitle（）方法。 我只想在数组“ titleList”中选择对象（例如i = 2）。 但是现在我只得到观察者作为回报。 我知道这是关于范围或绑定的，但是我在vue（和js！）中确实很新，所以有人可以帮助我吗？

谢谢 ！

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;
        },

Answer 1

那完全是正常现象，而这正是您想要发生的事情。 Vue会自动为您将每个对象包装到一个可观察对象中，以便在您的数据更改时，视图中的所有数据绑定都将自动更新，而您无需执行任何操作。 不用担心，它可以作为代理，您可以正常操作该对象。 例如：

currentTitle.title = 'Changed title'

将更新正确的属性，并且如果您的视图中有引用，甚至可以自动更新视图，而不必担心任何事情。 Vue很棒。

这是一个Codepen示例，使您的代码更进一步，希望有助于理解： Codepen示例