Как во Vue в одном объекте внутри data, сослаться на другой объект в data?

Question

[boga-net]

Здравствуйте. Почему я не могу в каком-либо объекте в data сослаться на другой объект в том же data ?

let item4 = 'Какой-то текст';
let item5 = [1, 2, 3, 4, 5];
let item6 = {
  name: 'Trololo',
  age: '111'
};

new Vue ({
  el: '#app',
  data: {
    item1: 100,
    item2: [1, 2, 3, 4, 5],
    item3: 'Some text',
    items: [
      { name: 'Item 0', amount: 666 },
      { name: 'Item 1', amount: this.item1 }, // Пусто 
      { name: 'Item 2', amount: this.item2.length }, // TypeError: this.item2 is undefined
      { name: 'Item 3', amount: this.item3 }, // Пусто 
      { name: 'Item 4', amount: item4 },
      { name: 'Item 5', amount: item5.length },
      { name: 'Item 5', amount: item6 },
      { name: 'Item 5', amount: 'Name: ' + item6.name + ' | ' + 'Age: ' + item6.age },
    ],
  },
  methods: {
    consoleLog1() {
      console.log( this.item2.length );
    },
    consoleLog2() {
      console.log( this.item2 );
    },
  }
});

в
{ name: 'Item 1', amount: this.item1.length }
и
{ name: 'Item 2', amount: this.item2 }

не могу обратиться к объектам item1 и item2 соответственно.
Но в методах могу обратиться тем же способом. И могу обращаться к переменным вне объекта data
и могу получить объект, массив или длину массива

Вот HTML разметка, на всякий случай, как я вызываю методы

<table>
    <tr v-for="item in items">
      <td>{{ item.name }}</td>
      <td>{{ item.amount }}</td>
      <td v-on:click="consoleLog1">sonsole log 1</td>
      <td v-on:click="consoleLog2">sonsole log 2</td>
    </tr>
  </table>

Answer 1

[Антон Швец]

ты создаешь объект, и this тут указывает на текущий контент. Самого компонента то еще нет.
Попоробуй посмотри что будет, если

const obj = {
  a: 1,
  b: this,
  с: this.a,
}

А то, что ты хочешь присвоить, надо делать в хуке created, когда $data уже будет определено.

Comments

[boga-net]

Антон

Попоробуй посмотри что будет, если

const obj = {
  a: 1,
  b: this,
  с: this.a,
}

Да, я понимаю, что здесь потеряется контекст, но я не думал, что во Vue будет что-то не так, если методы могут обращаться к this.element внутри data, а объекты внутри data - не могут.
Я смотрю видео уроки и попутно что-то делаю и решил поэкспериментировать, потыкать. И про created ещё ничего не видел и не слышал
Спасибо. Главное я понял, что таким образом нельзя так обращаться. Но не понял, почему компонента ещё нет, и почему data ещё не определено

[Александр Шелеметьев]

Вам надо понять жизненный цикл Vue

[Антон Швец]

boga-net,
new Vue ({})
Тут ты конструктору Vue говоришь - создай компонент по вот этим данным

В компоненте будет поле $data.items[1].amount, которое будет равно this.item1, причем this указывает на контекст в том месте, где ты это говоришь.

Например,

(function() { 
  return new Vue({
    data: { a: this.om },
  })
}).bind({om: 'Привет'})()

создаст компонент с $data.a = 'Привет'

Если в месте вызова конструктора new Vue в конексте нет свойства this, то присвоится undefined.

методы могут обращаться к this.element внутри data, а объекты внутри data - не могут.

Объекты внутри $data это обычные свойства с аксессорами, они могут обращаться к чему угодно, но тут ты им присваиваешь пустоту. Не получится присвоить ссылку на объекты в компоненте, самого компонента еще не существует, конструктор Vue его еще не создал.

Нужно делать это ПОСЛЕ того как компонент будет создан, для задания действий в такие моменты существуют хуки жизненного цикла Vue.

[boga-net]

Антон, Прошу прощения за столь поздний ответ. Да, теперь я понял, большое спасибо. Рановато попробовал поэкспериментировать, не освоив жизненные циклы и created