javascript - 如何在vue.js中从数组中获取对象

Question

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

页面加载时，将调用 selectTitle() 方法。我只想在数组“titleList”中选择对象(例如 i=2)。但现在我只得到观察者作为返回。我知道这是关于范围或绑定(bind)的，但我对 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 自动为您将每个对象包装成可观察对象，这样当您的数据发生变化时， View 中的所有数据绑定(bind)都会自动更新，而无需您执行任何操作。不用担心，它作为代理工作，您可以正常操作该对象。例如:

currentTitle.title = 'Changed title'

将更新正确的属性，如果您的 View 中有引用，甚至会自动更新您的 View ，而无需担心任何事情。这就是 Vue 的伟大之处。

这是一个 codepen 示例，让您的代码更进一步，希望有助于理解: Codepen Example