[Vuejs]-Importing child component into a parent Vue.js

by

4👍

✅

You have a typo, the components property should be defined on the component scope, but you placed it inside the data()

export default {
  name: "MachineProfiles",
  data: () => ({
    dialog: false,
    headers: [
      { text: "Number", value: "machine_number", sortable: true },
      { text: "Name", value: "machine_name" },
      { text: "Company", value: "machine_company" },
      { text: "Division", value: "machine_division" },
      { text: "Center", value: "machine_center" },
      { text: "Speed", value: "machine_speed" },
      { text: "CRUD", value: "name", sortable: false }
    ],
  },
  components: {
      EditMachine
  },
}
👤Borjante

2👍

I think it’s syntax error judgeing from the code you gave us.

export default {
  name: "MachineProfiles",
  data: () => ({
    dialog: false,
    headers: [
      { text: "Number", value: "machine_number", sortable: true },
      { text: "Name", value: "machine_name" },
      { text: "Company", value: "machine_company" },
      { text: "Division", value: "machine_division" },
      { text: "Center", value: "machine_center" },
      { text: "Speed", value: "machine_speed" },
      { text: "CRUD", value: "name", sortable: false }
    ], // <-- Missing closing brackets
    components: {
        EditMachine
    },

Try

export default {
  name: "MachineProfiles",
  data() {
    dialog: false,
    headers: [
      { text: "Number", value: "machine_number", sortable: true },
      { text: "Name", value: "machine_name" },
      { text: "Company", value: "machine_company" },
      { text: "Division", value: "machine_division" },
      { text: "Center", value: "machine_center" },
      { text: "Speed", value: "machine_speed" },
      { text: "CRUD", value: "name", sortable: false }
    ],
  },
  components: {
      EditMachine
  },
  ...
👤Thammarith

Leave a comment