Не могу получить доступ к данным из моего метода

Question

Я пытался получить доступ к моим "выбранным" данным из моего метода "itemChange" без какой-либо удачи вообще.
Я получил ошибку "this.selected не определено"

У меня вопрос, как я могу получить доступ от моего метода к данным моего компонента?

Моя реализация компонента

import VueSelect from 'vue-select';

Vue.component('v-select', VueSelect);
        Vue.component('club-type',{
            template: "#club-type",
            props: ['options'],

        data: {
                selected: {title: 'My title', logo: 'logo here', info: 'info here'}
        },
        methods: {
            itemChange: function () {
                console.log("msg: " + this.selected['title']);
            }
        }
    });

Мой шаблон

<script type="text/x-template" id="club-type">

                <v-select :options="options" label="title" :on-change="itemChange" :searchable="false" v-model="selected">

                    <template slot="option" scope="option">
                        <div class="float-left-items">
                            <div class="club-type-thumb" v-if="option.logo"><img v-bind:src="option.logo"></div>

                            <div class="club-type-title">{{ option.title }} <br/> <span class="pill club-type-pill"> AGE {{ option.age }}</span></div>
                        </div>
                    </template>
                </v-select>
</script>

В моем шаблоне выше, если я добавлю v-model="selected", это покажет ошибку "selected is undefined".

Answer 1

Сначала вам нужно вернуть ваши данные:

data () {
  return {
    selected: { title: 'My title', logo: 'logo here', info: 'info here' }
  }
},

Тогда это не массив, поэтому вы не можете получить к нему доступ, как пытались использовать в своем методе. Вы должны назвать это как собственность.

this.selected.title

РЕДАКТИРОВАТЬ: Как заявил @Phil, этот второй пункт не требуется.