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

【问题标题】：How to get object from array in vue.js如何从 vue.js 中的数组中获取对象
【发布时间】：2018-09-19 21:54:09
【问题描述】：

我想从 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;
        },

【问题讨论】：

标签： javascript arrays select vue.js scope

【解决方案1】：

这是完全正常的，正是你想要发生的。 Vue 会自动为您将每个对象包装成一个 observable，这样当您的数据发生变化时，视图中的所有数据绑定都会自动更新，而无需您执行任何操作。不用担心，这可以作为代理，您可以正常操作此对象。例如：

currentTitle.title = 'Changed title'

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

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

【讨论】：