link1918 link1919 link1920 link1921 link1922 link1923 link1924 link1925 link1926 link1927 link1928 link1929 link1930 link1931 link1932 link1933 link1934 link1935 link1936 link1937 link1938 link1939 link1940 link1941 link1942 link1943 link1944 link1945 link1946 link1947 link1948 link1949 link1950 link1951 link1952 link1953 link1954 link1955 link1956 link1957 link1958 link1959 link1960 link1961 link1962 link1963 link1964 link1965 link1966 link1967 link1968 link1969 link1970 link1971 link1972 link1973 link1974 link1975 link1976 link1977 link1978 link1979 link1980 link1981 link1982 link1983 link1984 link1985 link1986 link1987 link1988 link1989 link1990 link1991 link1992 link1993 link1994 link1995 link1996 link1997 link1998 link1999 link2000 link2001 link2002 link2003 link2004 link2005 link2006 link2007 link2008 link2009 link2010 link2011 link2012 link2013 link2014 link2015 link2016 link2017 link2018 link2019 link2020 link2021 link2022 link2023 link2024 link2025 link2026 link2027 link2028 link2029 link2030 link2031 link2032 link2033 link2034 link2035 link2036 link2037 link2038 link2039 link2040 link2041 link2042 link2043 link2044 link2045 link2046 link2047 link2048 link2049 link2050 link2051 link2052 link2053 link2054

[Vue.js] v-select auto selection based on value not key

my v-select items looks like below

{
key: ‘most_engaged’,
value: ‘Most engaged’
}, {
key: ‘’,
value: ‘Most recent’
}, {
key: ‘desc’,
value: ‘Most positive’
}, {
key: ‘asc’,
value: ‘Most negative’
}, {
key: ‘most_engaged1’,
value: ‘Most engaged’
}

Ie I set ‘most_engaged’ item as default one, then all items with value ‘Most Engaged’ are selected.So how to resolve this issue?

My Exact requirement is preselection is based on key not value…

Solution :

Use the item-text and item-value props described here:
https://vuetifyjs.com/en/components/selects#select
Then set a v-model to the default value like this:

<v-select
:items=”myItems”
item-text=”key”
item-value=”value”
v-model=”currentValue”
\></v-select>
.
.
.
data(){
return {
currentValue: {
key: ‘most_engaged’,
value: ‘Most engaged’
}
```

[Vue.js] I'm need to ignore the text of a select and use just the numeric value, I'm using vue

I’m learning vue.js and decided to make a simple tax calculator with the result showing in real time(without a show total value button), everything is fine but there is a select and and ideally you’ll be able to see the type of tax and the value, however, I can only make it work with just the value.

<select ref=”taxEs” class=”form-control” v-model=”settings.tax” @change=”saveChanges()” onfocus=”this.select()”>
<option>tax1, 6.25%</option>
<option>tax2, 8.90%</option>
<option>tax3, 8.25%</option>
<option>9.25</option>

so only the last option(9.25) works, how can I put the description but make vue.js to only use the value.

Thank you.

Solution :

You can pass a value on the .
Something like this:

<option val=”6.25”>tax1, 6.25%</option>
<option val=”8.9”>tax2, 8.90%</option>
<option val=”8.25”>tax3, 8.25%</option>
<option val=”9.25”>9.25</option>

[Vue.js] What is the best practice to separate Vuex modules?

From an architectural point of view what is the best to separate/structure the Vuex Store into modules? I tend to create a module for each major routes when using vue.js router.

When using this approach (diving modules by Views) I often occur the case that there is dependencies between the pages and Vuex modules.

The provided example of Vuex documentation is recommending a domain driven approach?
https://vuex.vuejs.org/guide/structure.html

Solution :

I usually create my modules around my data rather than around the routes calling the data. The point of state management in Vuex is to allow access to data from multiple components and routes after all. So for example, if I’m querying an API for a user, I’ll make a module related to that user object. Similarly, if you have a themed UI, I would create a module for switching themed elements. Or if you are using a toast notification to display success/error messages that might be a good candidate for a module.

[Vue.js] Vuex this.$store undefined in mounted life cycle hook

when currently integrating the Paypal service to my vue.js project. I’ve referred to the official document and copied the code https://developer.paypal.com/docs/checkout/integrate/#6-verify-the-transaction. I was able to render the Paypal button, complete the transaction and receive an orderID. However, when unable to send the orderID to my server due to the following error: this.$store is undefined. Do note that, I was able to reference this.$store in my other components. Below is my following code:

Update: I tried to console.log(this) in the onApprove method and it returns undefined. Is that the problem?

Update I’ve converted the OnApprove method and capture() method to arrow function and received a different error message this.$store.dispatch(…).then(…).err is not a function

Update I managed to fix the above error by changing .err() to .catch().

Update I faced another problem, sometimes which I click on the Paypal button, the external Paypal window will immediately close by itself. there is to click on the button a few time, to prevent this strange behaviour. I went to the console log and found this message as shown in the following screenshot.

<template>
<div>
<div id=”paypal-button-container”></div>
</div>
</template>

<script>
import { PRODUCT_PAYPAL } from “@/store/actions/products”;

export default {
mounted() {
paypal
.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [
{
amount: {
value: “0.01”
}
}
]
});
},
onApprove: (data, actions) => {
return actions.order.capture().then(details => {
alert(“Transaction completed by “ + details.payer.name.given_name);
console.log(“orderID is “);
console.log(data.orderID);

// Call the server to save the transaction
return this.$store
.dispatch(PRODUCT_PAYPAL, data.orderID)
.then(() => {
alert(“success”);
})
.catch(() => {
alert(“error”);
});
});
}
})
.render(“#paypal-button-container”);
}
};
</script>

<style>
</style>

As shown in the following screenshot, I was able to receive the orderID which means that the transaction was successful. However, this.$store is undefined. Hence, I can’t send the order ID to my server

Solution :

Use an arrow function on the callback function, to have access to this.

onApprove: (data, actions) => …

return actions.order.capture().then((details) => …

[Vue.js] How to disable available times looping through an array using watch?

I’m creating a booking application in vue.js CLI. I decided to use vue-ctk-date-time-picker for choosing date and time. I’m planning to disable some times, depending on the date, but i’m running to a problem. My code only disables the times of last date specified in array and ignores the rest.

I’ve logged the times array to console depending on the date and it prints correct values. Other than that console displays no errors.

<VueCtkDateTimePicker only-date v-model=”date”/>
<VueCtkDateTimePicker only-time :disabled-hours=”disabledHours”/>
date: null,
disabledHours: [],
testArray: [
{
date: “2019-05-28”,
times: [“10”, “11”]
},
{
date: “2019-05-29”,
times: [“10”, “11”, “12”]
}
]

watch: {
date(newVal, oldVal) {
for (let i = 0; i < this.testArray.length; i++) {
if (newVal == this.testArray[i].date) {
for (let j = 0; j < this.testArray[i].times.length; j++) {
this.disabledHours.push(this.testArray[i].times[j]);
}
} else {
this.defaultHours();
}
}
}
},
created() {
this.defaultHours();
}

defaultHours() {
this.disabledHours = [“00”,”01”,”02”,”03”]
}

If date is “2019-05-28”, then i expect disabled hours to be 10 and 11.
If date is “2019-05-29”, then i expect disabled hours to be 10, 11 and 12 etc.

But what happen is, that it takes the last date specified in the array and only disables its hours.

Solution :

The code you’ve posted will always loop through all entries in testArray and take some action for each entry. I think the behavior you want is for the code to only take action on an entry that matches, and default if no entry matches. There are many ways to achieve that behavior but one way is the following

date(newValue) {
const matched = testArray.find(entry => entry.date === newValue);
if (matched) {
this.disabledHours = matched.times;
} else {
this.defaultHours();
}
}

[Vue.js] Is calling computed property from inside Vue method multiple times affecting the performance?

there is a problem with structuring my code written in Vue, in relation to computed properties and performance. I’d like to use computed properties - to not violate DRY rule - but I’m worried that it may affect performance.

I need to solve a UI problem and it is largely connected to div height.
So I take the height value by accesing $refs:

var divHeight = this.$refs.divRef.clientHeight;

And then I must use divHeight multiple times in my component methods.

Basically there is three options now. Look at this snippet to see what I mean:
CodePen.

What is the best way to tackle this issue?

Solution :

First of all I’d like to mention that whatever method you end up using, it’s unlikely to yield a significant performance improvement. If performance is the primary concern, then you should profile the webpage to determine which method works best. Most of the time I would preference code readability/maintainability over performance.

1. No computed properties, declare divHeight in every method separately.

methods: {
firstMethod() {
var divHeight = this.$refs.divRef.clientHeight;

},

secondMethod() {
var divHeight = this.$refs.divRef.clientHeight;

}
}

This is preferable if the div’s height can change, so you do want to fetch the correct height each time the methods are called in case the height was changed.

2. Make divHeight computed property, declare it anyway as a variable inside a method.

computed: {
divHeight() {
return this.$refs.divRef.clientHeight;
}
},

methods: {
firstMethod() {
var divHeight = this.divHeight;

},

secondMethod() {
var divHeight = this.divHeight;

}
}

divHeight will be calculated once only, the first time the property is accessed. If the div’s height changes then divHeight will not be recalculated. This solution is not suitable for this situation since computed properties are typically used when that property relies on other observable data properties of that component (this.$refs.divRef.clientHeight is not observable by Vue).

3. Make divHeight computed property, use this.divHeight multiple times inside a method.

computed: {
divHeight() {
return this.$refs.divRef.clientHeight;
}
},

methods: {
firstMethod() {
this.divHeight/this.divWidth = something;
this.divHeight… other operations.
},

secondMethod() {
this.divHeight/this.divWidth = something;
this.divHeight… other operations.
}
}

This is the same as #2 except you’re accessing this.divHeight multiple times in each method. The only “improvement” this has over #2 is avoiding the property access, which is negligible; but if you’re using this.divHeight many times in a method then perhaps #2 is better to avoid having this. everywhere.

I would suggest this instead:

methods: {
divHeight() {
return this.$refs.divRef.clientHeight;
},

firstMethod() {
var divHeight = this.divHeight();

},

secondMethod() {
var divHeight = this.divHeight();

}
}

This is basically the same as #1 except it’s a bit shorter because you don’t have to type this.$refs.divRef.clientHeight everywhere.

[Vue.js] vuerouter editing link and do I store the state?

when using vuerouter really for the first time and when trying to dynamically add a url name to the hyperlink of the route. Not sure what when doing here, {message} would show the name and when trying to concatenate that to the existing url–what am I doing wrong?

secondly, because these pages are dynamically generated, would I use vuex to store the state–? so that others could see the pages–?

const Home = { template: ‘<div>Home</div>’ }
const Foo = {
template: ‘<div>Foo {n }, {b}</div>’,
props: [‘n’, ‘b’]
}

const router = new VueRouter({
mode: ‘history’,
routes: [
{ path: ‘/‘, component: Home },
{ path: ‘/‘, component: Foo, props: route => ({

})}
]
})
new Vue({
router,
el: ‘#app’,
data: {

message:’’
}
})
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<html>
<head>

<script src=”https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src=”https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!– Latest compiled and minified CSS –>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity=”sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u” crossorigin=”anonymous”>

<!– Latest compiled and minified JavaScript –>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity=”sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa” crossorigin=”anonymous”></script>

<script src=”https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src=”https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!– Latest compiled and minified CSS –>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity=”sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u” crossorigin=”anonymous”>

<!– Latest compiled and minified JavaScript –>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity=”sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa” crossorigin=”anonymous”></script>

</head>

<body class=”container”>
<div id=”app”>

<h2>Generator</h2>

<input v-model=”message” placeholder=”Enter Plan Year”> {message} Year<br><br>
These pages are automatically generated:<br>
<strong> CardMain_{message}.html</strong><br>
<strong> Card_{message}.html</strong><br>
<strong> state_{message}.html</strong><br>
<strong> Log_{message}.html</strong><br>
<strong> Log2_{message}.html</strong><br><br>
<router-link to=”/“>/home</router-link>
<router-link to=”url/+’{message}+’”>eCard</router-link>
<router-link to=”/foo/5/5”>Directory</router-link>
<router-view></router-view>

<p><button class=”btn btn-primary”>Generate</button></p>
</div>

Solution :

In order to generate the url, what you want is to use a v-bind on the route, you can do this by replacing the “to” with “:to”
Once you have that, the content of the attribute “:to” behaves as if it was javascript and you have access to all the properties of the vue.js component so you can just do:

<router-link to=”‘url/‘ + message”>eCard</router-link>

However this route hasnt actually been registerd so it will not load anything.
Instead you may want to register a route that accepts a parameter

{ path: ‘/url/:id’, name: ‘ecard’, component: eCardComponent , props: true }

In this way you can call the route as

<router-link :to=”{ name: ‘ecard’, params:{ id: message } }”>eCard</router-link>

Then you can do whatever you need in that component, like loading info from a database for that particular id.

Additionally, Vuex only works on the current tab (unless you use some code to syncronize it with the localstorage, like this example) and even then it would not persit it across machines.

const Home = { template: ‘<div>Home</div>’ }
const eCardComponent = { template: ‘<div>Ecard :{id}</div>’, props:[‘id’] }
const Foo = {
template: ‘<div>Foo {n }, {b}</div>’,
props: [‘n’, ‘b’]
}

const router = new VueRouter({
routes: [
{ path: ‘/‘, component: Home },
{ path: ‘/‘, component: Foo, props: route => ({

})},
{ path: ‘/url/:id’, name:’ecard’, component: eCardComponent, props: true },
]
})
new Vue({
router,
el: ‘#app’,
data: {

message:’’
}
})
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<html>
<head>

<script src=”https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src=”https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!– Latest compiled and minified CSS –>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity=”sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u” crossorigin=”anonymous”>

<!– Latest compiled and minified JavaScript –>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity=”sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa” crossorigin=”anonymous”></script>

<script src=”https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src=”https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!– Latest compiled and minified CSS –>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity=”sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u” crossorigin=”anonymous”>

<!– Latest compiled and minified JavaScript –>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity=”sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa” crossorigin=”anonymous”></script>

</head>

<body class=”container”>
<div id=”app”>

<h2>Generator</h2>

<input v-model=”message” placeholder=”Enter Plan Year”> {message} Year<br><br>
These pages are automatically generated:<br>
<strong> CardMain_{message}.html</strong><br>
<strong> Card_{message}.html</strong><br>
<strong> state_{message}.html</strong><br>
<strong> Log_{message}.html</strong><br>
<strong> Log2_{message}.html</strong><br><br>
<router-link to=”/“>/home</router-link>
<router-link :to=”{ name: ‘ecard’, params:{ id: message } }”>eCard</router-link>
<router-link to=”/foo/5/5”>Directory</router-link>
<router-view></router-view>

<p><button class=”btn btn-primary”>Generate</button></p>
</div>

[Vue.js] Laravel Vuejs Error Uncaught ReferenceError Login is not defined

I’m trying to use vue-router in a CRUD app I’ve followed in a tutorial. The links showing up but I get this error:
Uncaught ReferenceError: Login is not defined

I already imported vue-router in my app.js and laid out the routes in my routes.js file. Yet the error still pops out. I’ve been searching for this error for a while now and can’t seem to find out what’s causing this.

app.js:

require(‘./bootstrap’);

import VueRouter from ‘vue-router’

Vue.use(VueRouter)

Vue.component(‘navbar’, require(‘./components/Navbar.vue’).default);
Vue.component(‘customers’, require(‘./components/Customers.vue’).default);
Vue.component(‘login’, require(‘./components/auth/Login.vue’).default);

const router = new VueRouter({
routes: [
{ path: ‘/login’, component: Login },
{ path: ‘/register’, component: Register }
]
})

const app = new Vue({
el: ‘#app’,

router: router
})

routes.js:

import App from ‘./App’
import Login from ‘./components/auth/Login’
import Logout from ‘./components/auth/Logout’
import Register from ‘./components/auth/Register’

export const routes = [
{
path: ‘/customers’,
name: ‘customers’,
component: App,
meta: {
requiresAuth: true,
}
},
{
path: ‘/login’,
name: ‘login’,
component: Login,
meta: {
requiresVisitor: true,
}
},
{
path: ‘/register’,
name: ‘register’,
component: Register,
meta: {
requiresVisitor: true,
}
},
{
path: ‘/logout’,
name: ‘logout’,
component: Logout
}
]

export default routes

Thanks!

Solution :

Like all the other answers, there are so many things wrong with this code.

Firstly, there is a routes.js file, but it’s not being used.

I’ve created a sandbox version of the code https://codesandbox.io/s/z22rx97z24 to show you a working version of the router/app.

What’s changed?

Firstly, you should export an instance of the vue.js router in the routes.js not just define a const. This is the recommended way of routing in Vue.

import vue.js from “vue”;
import Router from “vue-router”;

import App from “./App”;
import Login from “./components/auth/Login”;
import Logout from “./components/auth/Logout”;
import Register from “./components/auth/Register”;

Vue.use(Router);

export default new Router({
routes: [
{
path: “/customers”,
name: “customers”,
component: App,
meta: {
requiresAuth: true
}
},
{
path: “/login”,
name: “login”,
component: Login,
meta: {
requiresVisitor: true
}
},
{
path: “/register”,
name: “register”,
component: Register,
meta: {
requiresVisitor: true
}
},
{
path: “/logout”,
name: “logout”,
component: Logout
}
]
});

Secondly, you import that instance into app.js and assign into the router property of the vue.js instance.

import vue.js from “vue”;
import VueRouter from “vue-router”;
import router from “./routes”;

Vue.use(VueRouter);

const app = new Vue({
el: “#app”,

router: router
});

You keep components out of the app.js where possible. This allows you to do things like on-demand resource loading inside the router.js etc.

Solution 2:

import routes from ‘./routes.js’
const router = new VueRouter({routes})

To the actual error. Yes you imported Login in the routes.js file, but at the error shows you, it isn’t defined in app.js. You need to import things in every file you want to use it in.

Solution 3:

You seem to have mixed up some code in the app.js file.

Specifically, the problem is here…

{ path: ‘/login’, component: Login },

You don’t have a Login symbol defined anywhere. You’re also defining some global components which I’m not sure you want to do.

What I think you want is to remove all this…

Vue.component(‘login’, require(‘./components/auth/Login.vue’).default);

const router = new VueRouter({
routes: [
{ path: ‘/login’, component: Login },
{ path: ‘/register’, component: Register }
]
})

and replace it with

import { routes } from ‘./routes’

const router = new VueRouter({ routes })

I’m also a little suspicious of

require(‘./bootstrap’);

but you haven’t said what bootstrap is so I’ll leave that with you to figure out.

[Vue.js] Advice needed VueJS fullstack app with express - should I use 2 stores, separate Vue app or express app for admin in the backend (server)

when very new to Vuejs. there is designed a little online store and now want to implement the admin side where he client can add, edit stock items etc.

My question is simply that I need advice on the following:

Should I do this in the same app just using an admin route in router. If yes then should I create a second store (is this good practice)
should I do this in a separate app (possibly just an express app on the backend)

Solution :

Well it depends the business model and project roadmap. But can I can mention few things you can consider making the decision. I totally agree with other answer as well.

In my experience having the admin app as an separate app, reaped more benefits(NOTE: In My Experience, the might differ).

Benefits

Less overhead on the routing side. Meaning you don’t need to build special permission system on the router to only show what the user is aloud to see(Normal users now allowed to see admin related pages).
Adds a bit of reassurance to know that normal user might not stumble on admin pages which they not allowed to see.
If you want to make a change on the admin side only or vice versa, you only have to build/push production for one app. So eliminating potential stuff breaking on the other app you dont want to build/push.

Drawback

If both apps uses same components you either have to duplicate work done on them or have a component library which shares components between project(I created a component lib in my case, which help a lot later on when we needed to create additional apps)
If an user uses both apps, he have to switch between websites(In my this was trivial because users are most either just using the admin or just using the online shop app)
Cost of hosting an additional website.

Solution 2:

As with many things, I don’t think there is any right or wrong answer, and will mostly depend on the project and objectives. For me, the determining factor when deciding whether to extend a UI or separate it into its own project will mostly depend on the following factors:

How much overlap is there between the UI designs? If you need to re-use significant amounts of code/styling then keeping it as a single project makes sense.
What’s the scope of the additions? If the addition is very minor (a single page or two) then keeping it as a single project makes more sense, even if the overlap is minimal. However, if the scope is extensive with lots of different components and routes, separating the projects might be the better choice.
What’s the cost/benefit of time to develop the interface, vs time you (or others) will spend using it.

In the end, if it’s a full-fledged back-end you’re creating it’s often best to take the CMS approach and give it a dedicated backend styling, whereas if it’s just a few user preferences you need to toggle, then that might be overkill.

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

I’m trying to import a test component (It just contains a <h1> with some text) into another one, but i get this error:
[vue.js warn]: Unknown custom element: <EditMachine> - did you register the component correctly? For recursive components, make sure to provide the “name” option.

I’ve tried running the disable cache option in the Network tab in Chrome DevTools, i’ve named both components, and i’ve named my Index component.

Here’s how the <EditMachine> component looks like:

export default {
name: “EditMachine”,
data() {
return {};
}
};
</script>
And here’s how the parent component looks like:
import EditMachine from “./EditMachine.vue”;
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
},

Can someone help or at least point me in the right direction? Thanks in advance!

Solution :

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
},
}

Solution 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
},