Массив внутри компонента Vue имеет несколько методов реагирования и входа в систему при входе в консоль - PullRequest
Новая
       34

Массив внутри компонента Vue имеет несколько методов реагирования и входа в систему при входе в консоль

0 голосов
/ 30 апреля 2020

Я разработал vue компонент чата с использованием Typescript. У меня есть массив сообщений, который заполнен функцией send и использует его как веб-компонент , а затем vue -custom-element .

Проблема в том, что когда я регистрирую массив messages , в нем есть куча реактивныйSetter и реактивныйGetter мотод. Я сделал что-то не так?

Console log with multiple reactiveSetter function

Это компонент vue: 

<template>
  <div id="main">
    <div id="room" class v-chat-scroll="{ always: false, smooth: true }">
      <div
        class="message"
        v-for="message in messages"
        :key="message.id"
        :class="message.owns ? 'owns' : ''"
      >
        <fa-icon icon="user" />
        <app-baloon :direction="message.owns ? 'right' : 'left'">
          <!-- <div class="baloon" > -->
          <strong>{{ message.user }}:</strong>
          {{ message.text }}
        </app-baloon>
        <!-- </div> -->
      </div>
    </div>
    <textarea
      type="text"
      v-model="newMessage"
      id="new-message"
      @keydown.enter.exact.prevent="send"
      placeholder="Send the message..."
    ></textarea>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import AppBaloon from "../AppBaloon";
import { log } from "fabric/fabric-impl";

interface Message {
  id: number;
  user: string;
  text: string;
  time: string;
  owns: boolean;
}

@Component({
  components: {
    AppBaloon
  }
})
export default class Chat extends Vue {
  private messages = [
    {
      id: 1,
      user: "John",
      text: "Hello",
      time: "10:52",
      owns: false
    }
  ] as Message[];
  newMessage = "";

  send() {
    if (this.newMessage.trim() != "") {
      const newMessageItem = {
        id: Math.random(),
        user: "Alice",
        text: this.newMessage,
        time: new Date().toJSON().slice(11, 16),
        owns: true
      } as Message;

      this.messages.push(newMessageItem);
    }
    this.newMessage = "";
    console.log(this.messages);
  }
}
</script>

1 Ответ

1 голос
/ 30 апреля 2020

Когда вы передаете простой объект JavaScript в экземпляр Vue в качестве параметра данных, Vue будет проходить через все его свойства и преобразовывать их в методы получения / установки, используя Object.defineProperty. . Эта функция доступна только для ES5 и не используется, поэтому Vue не поддерживает IE8 и ниже.

Подробнее: https://vuejs.org/v2/guide/reactivity.html#How -Изменения-отслеживаются

Это означает, что нет - ошибки нет, это основной метод Vue, чтобы данные реагировали. Так что это функция (или функция, если хотите):)

Одно предостережение заключается в том, что консоли браузера по-разному форматируют getter / setters при регистрации преобразованных объектов данных, поэтому вы можете захотеть установить vue -devtools для более удобного интерфейса.

Vue devtools: https://github.com/vuejs/vue-devtools

...