How do I work with the Javascript console?

Question

my project is generating this error:

It is on account of that method:

components: {
       VLayout: require('@/layouts/base'),

    },

How do I know what the result of VLayout using the console.log()?

I have tried several ways to implement the console.log in the method but is always generating erros by adding it.

I’ve tried that and it didn’t work:

components: {
      const VLayout: require('@/layouts/base'),
        console.log(VLayout),
    },

I’ve tried that too and it didn’t work:

components: {
      var teste = VLayout: require('@/layouts/base'),
        console.log(teste),
    },

I’ve tried that and it didn’t work;

components: {
      var teste = VLayout: require('@/layouts/base'),
        console.log(teste);
    },

=====================================================================

I tried that way when he didn’t print anything.

      <template>
  <v-layout>
    <v-grid variant="container">
      <v-row variant="xs-center">
        <v-col :variants="['xs-9', 'md-4', 'lg-3']">
          <v-card>
            <v-card-body>
              <v-form @submit.prevent.native="setQuery(query)">
                <v-input-group>
                  <v-icon variant="signifier">search</v-icon>
                  <v-text-field
                    variant="with-signifier"
                    v-model="query"
                    placeholder="Find artist"
                  />
                </v-input-group>
              </v-form>
            </v-card-body>
          </v-card>
        </v-col>
        <v-col :variants="['xs-3', 'md-4', 'lg-3', 'md-offset-4', 'lg-offset-6']">
          <v-button
            variant="circle"
            class="pull-right"
            @click.native="redirectToCreatePage"
          >
            <v-icon>add</v-icon>
          </v-button>
        </v-col>
      </v-row>
      <v-row>
        <v-col variant="sm">
          <v-table>
            <v-table-header>
              <v-table-row>
                <v-table-head>Name</v-table-head>
                <v-table-head>Birthday</v-table-head>
              </v-table-row>
            </v-table-header>
            <v-table-body>
              <v-table-row
                v-for="artist in artist.all"
                :key="artist"
                variant="body"
              >
                <v-table-cell>
                  <router-link :to="getArtistRoute(artist.id)">{{ artist.fullName }}</router-link>
                </v-table-cell>
                <v-table-cell>{{ artist.birthday }}</v-table-cell>
              </v-table-row>
              <v-table-row v-if="artist.all.length === 0">
                <v-table-cell colspan="3">Artists not found...</v-table-cell>
              </v-table-row>
            </v-table-body>
          </v-table>
        </v-col>
      </v-row>
      <v-row>
        <v-col variant="xs-justify">
          <v-card variant="inline">
            <v-card-body>
              <v-pagination
                :pagination="artist.pagination"
                :switch-page-function="setPage"
                variant="small"
              />
            </v-card-body>
          </v-card>
          <v-card variant="inline">
            <v-card-body>
              <v-select
                v-model="artist.pagination.limit"
                :items="pageNumbers"
              />
            </v-card-body>
          </v-card>
        </v-col>
      </v-row>
    </v-grid>
  </v-layout>
</template>
<script>
  export default {
    /**
     * The name of the layout.
     */
    name: 'artist-index',

    data() {
      return {
        artist: {
          all: [],
          pagination: {
            totalCount: 0,
            totalPages: 0,
            currentPage: 1,
            limit: 5,
          },
        },
        drawerActive: false,
        query: null,
        pageNumbers: [
          5,
          10,
          15,
        ],
      };
    },

    /**
     * The methods which the layout can use.
     */
    methods: {
      /**
       * Method used to hide the drawer.
       */
      hideDrawer() {
        this.drawerActive = false;
      },

      /**
       * Method used to toggle the drawer.
       */
      toggleDrawer() {
        this.drawerActive = !this.drawerActive;
      },

      /**
       * Method used to get the artist route.
       *
       * @param {Number} id The artist identifier.
       *
       * @returns {Object} The artist route.
       */
      getArtistRoute() {
        // todo
      },

      /**
       * Method used to redirect the user to the artist create page.
       */
      redirectToCreatePage() {
        // todo
      },

      /**
       * Method used to go to a different page.
       *
       * @param {Number} page The page number.
       */
      setPage() {
        // todo
      },

      /**
       * Method used to set the limit of the items being displayed.
       *
       * @param {Number} limit The limit of items being displayed.
       */
      setLimit() {
        // todo
      },

      /**
       * Method used to set the query of the search bar.
       * The results will be debounced using the lodash debounce method.
       */
      setQuery() {
        // todo
      },
    },

    /**
     * Available watchers for this page.
     */
    watch: {
      query(query) {
        this.setQuery(query);
      },
    },

    components: {
      VLayout: require('@/layouts/base'),
    },

  };

  function evidenciaConsole(valor){
  var traco = "--------------------------------------------------------------";
  console.log(traco + " Inicio " + traco);
  console.log(JSON.stringify(VLayout));
  console.log(VLayout);
  console.log(traco + "  Fim   " + traco);
}




</script>

Answer 1

I created this function to show anything in console.log, so far it is working perfectly, if anyone wants to improve thank you, I want to have a function that can show any variable, array or whatever, try using and see if the Vlayout value will show up with it:

function evidenciaConsole(valor){
    var traco = "--------------------------------------------------------------";
    console.log(traco + " Inicio " + traco);
    console.log(JSON.stringify(valor));
    console.log(valor);
    console.log(traco + "  Fim   " + traco);
}

I created this tracus variable to be able to highlight the result in the console, I am using JSON.stringify which converts a javascript object to a json string and if the value is a variable any display it with the console.log.

Answer 2

'Cause you don’t try to import your component like that here.

This way you can use the console to display the component object.

<template>
  <div id="app">
    <v-layout/>
  </div>
</template>

<script>

import VLayout from "./components/VLayout";

console.log(VLayout);

export default {
  name: "App",
  components: {
    VLayout
  }
};
</script>

I set an example at codesandbox and versionei on Github for future use.