如何從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示例