When evaluating code quality, what should you pay attention to?

Question

Vue.js

Gentlemen professional programmers!
I have been programming for a year now, I would like to find out what should I pay attention to when assessing the quality of the code?
Code without refactoring.

<template>
  <v-container fluid>
    <v-row>
      <v-col
        class="pt-0"
        cols="12"
      >
        <div class="text-right">
          <v-tooltip bottom>
            <template v-slot:activator="{ on }">
              <v-btn
                outlined
                small
                color="indigo"
                open-delay="2000"
                v-on="on"
                @click="restaurantsAddShowDialog"
              >
                {{ $t("pages.restaurants.toolbar.new_restaurant.title") }}
              </v-btn>
            </template>
            <span>{{ $t("pages.restaurants.toolbar.new_restaurant.hint") }}</span>
          </v-tooltip>
        </div>
      </v-col>
    </v-row>
    <v-row>
      <v-col cols="12">
        <v-simple-table
          dense
          class="table_dark"
        >
          <template v-slot:default>
            <thead>
              <tr>
                <th class="text-left" style="width: 120px">
                  ID ресторана
                </th>
                <th class="text-left">
                  Наименование
                </th>
                <th />
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in restaurants" :key="item.id">
                <td class="text-left">
                  {{ item.id }}
                </td>
                <td style="width: auto">
                  {{ item.name }}
                </td>
                <td class="text-right" style="width: 50px; border-left: none">
                  <div class="text-center">
                    <v-menu offset-y>
                      <template v-slot:activator="{ on }">
                        <v-btn
                          fab
                          dark
                          x-small
                          text
                          color="black"
                          v-on="on"
                        >
                          <v-icon dark>
                            mdi-dots-horizontal
                          </v-icon>
                        </v-btn>
                      </template>
                      <v-list>
                        <v-list-item
                          v-for="(table_options_item, table_options_item_index) in table_options"
                          :key="table_options_item_index"
                          @click="table_options_item.action(item)"
                        >
                          <v-list-item-title>{{ table_options_item.title }}</v-list-item-title>
                        </v-list-item>
                      </v-list>
                    </v-menu>
                  </div>
                </td>
              </tr>
            </tbody>
          </template>
        </v-simple-table>
      </v-col>
    </v-row>
    <!--  Dialog for add restaurant  -->
    <v-row justify="center">
      <v-dialog v-model="dialog_add_restaurant" persistent max-width="600px">
        <v-card>
          <v-card-title>
            <span class="headline">{{ $t("pages.restaurants.dialog.add.title") }}</span>
          </v-card-title>
          <v-card-text>
            <v-container>
              <v-row>
                <v-col cols="12">
                  <v-text-field
                    v-model="restaurant_name"
                    :label="'* '+$t('pages.restaurants.dialog.add.restaurant_name_title')"
                    required
                  />
                  <v-textarea
                    outlined
                    name="input-7-4"
                    :label="$t('pages.restaurants.dialog.add.restaurant_description_title')"
                    value=""
                  />
                </v-col>
              </v-row>
            </v-container>
            <small>* {{ $t("this_field_is_required") }}</small>
          </v-card-text>
          <v-card-actions>
            <v-spacer />
            <v-tooltip
              bottom
              open-delay="1000"
            >
              <template v-slot:activator="{ on }">
                <v-btn
                  color="blue darken-1"
                  text
                  v-on="on"
                  @click="dialog_add_restaurant = false"
                >
                  {{ $t("pages.restaurants.dialog.add.actions.cancel.title") }}
                </v-btn>
              </template>
              <span>{{ $t("pages.restaurants.dialog.add.actions.cancel.hint") }}</span>
            </v-tooltip>
            <v-tooltip
              bottom
              open-delay="1000"
            >
              <template v-slot:activator="{ on }">
                <v-btn
                  color="blue darken-1"
                  text
                  v-on="on"
                  @click="restaurantsAdd"
                >
                  {{ $t("pages.restaurants.dialog.add.actions.save.title") }}
                </v-btn>
              </template>
              <span>{{ $t("pages.restaurants.dialog.add.actions.save.hint") }}</span>
            </v-tooltip>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-row>
    <v-row>
      <msg-dialog />
    </v-row>
  </v-container>
</template>

<script>
import MsgDialog from "../components/Dialog/MsgDialog"
export default {
  name: "Restaurants",
  components: { MsgDialog },
  async asyncData ({ $axios }) {
    let restaurants = []
    await $axios.$get(`${process.env.api}/restaurants.get`, {
      params: {
        offset: 0,
        count: 10
      }
    }).then(({ count, items }) => {
      restaurants = items
    }).catch((e) => {
      // eslint-disable-next-line no-console
      console.log(e)
    })
    return {
      restaurants
    }
  },

  data () {
    return {
      dialog_add_restaurant: false,
      restaurant_name: "",
      restaurant_description: "",
      restaurants: []
    }
  },

  computed: {
    table_options () {
      return [
        {
          title: this.$t("delete"),
          action: (item) => {
            this.showConfirmDialogDeleteRestaurants(item)
          }
        },
        {
          title: this.$t("edit"),
          action: ({ id }) => {

          }
        }
      ]
    }
  },

  methods: {

    restaurantsAddShowDialog () {
      this.dialog_add_restaurant = true
    },

    /**
     * Add new restaurant
     */
    restaurantsAdd () {
      this.dialog_add_restaurant = false
      this.$axios.$post(`${process.env.api}/restaurants.add`,
        {
          name: this.restaurant_name,
          description: this.restaurant_description
        }).then(({ code, msg }) => {
        this.restaurant_name = ""
        this.restaurant_description = ""
        this.$toasted.show(msg, {
          theme: "toasted-primary",
          position: "top-right",
          duration: 3000,
          onComplete: () => {
            this.$axios.$get(`${process.env.api}/restaurants.get`, {
              params: {
                offset: 0,
                count: 10
              }
            }).then(({ count, items }) => {
              this.restaurants = items
            }).catch((e) => {
              console.log(e)
            })
          }
        })
      }).catch((e) => {
        console.log(e)
      })
    },

    showConfirmDialogDeleteRestaurants ({ id }) {
      this.$emit("msg-dialog-show", {
        title: this.$t("confirmation_request"),
        text: this.$t("are_you_sure_you_want_to_delete"),
        buttons: [
          {
            action () {},
            text: this.$t("no"),
            color: "red darken-1"
          },
          {
            action: () => {
              this.restaurantsRemove(id)
            },
            text: this.$t("yes"),
            color: "green darken-1"
          }
        ]
      })
    },

    /**
     * Restaurant Removal
     */
    restaurantsRemove (id) {
      this.$axios.$get(`${process.env.api}/restaurants.remove`,
        {
          params: {
            restaurant_id: id
          }
        }).then(({ code, msg }) => {
        this.$toasted.show(msg, {
          theme: "toasted-primary",
          position: "top-right",
          duration: 3000,
          onComplete: () => {
            this.$axios.$get(`${process.env.api}/restaurants.get`, {
              params: {
                offset: 0,
                count: 10
              }
            }).then(({ count, items }) => {
              this.restaurants = items
            }).catch((e) => {
              console.log(e)
            })
          }
        })
      }).catch((e) => {
        console.log(e)
      })
    }
  },

  head () {
    return {
      title: "Мои рестораны"
    }
  }
}
</script>

<style scoped>

</style>

Always haunted by doubt.
There always seems to be room for improvement.
Thank you.

Answer 1

• It is better to move work with api to a separate layer, and call its methods in components
  
• refrain from using inline styles
  

• action: (item) => {
   this.showConfirmDialogDeleteRestaurants(item)
  }

  can be written as
  
• the dialog box can be moved to a separate component
  
• add on v-textarea v-model
  
• Deal with naming - restaurants are plural everywhere, although the action is performed on one restaurant, in addition, I would start the name of the methods with the action, and not with what this action is happening on - restaurantsRemove => removeRestaurant. This will allow you to quickly navigate through the code. You should also decide on the entity naming format, you now have snake_case mixed with camelCase. You have to choose one.
  
• Such comments above the methods are of no use, by the name of the method, and so all this is clear
  
• The restaurantsAdd method looks quite voluminous, for example, you can try to pull out the toaster display logic itself from it
  
• Don't use relative imports when you don't need them. This will make it much easier for you to make changes to the structure of your application in the future.