Access data variable inside a component - javascript

I made a repository of Vue using
vue init webpack my-app
Now, my main.js is something like this --
// The Vue build version to load with the import command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
Vue.component('todo-item', {
template: '<li>{{ todo }}</li>',
props: ['todo']
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App :groceryList="groceryList"/>',
data:{
message: 'abcdefghi',
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
})
My App.vue file has the template with id app as mentioned in the main.js
<template>
<div id="app">
At Parent: {{ groceryList[1].text }}
<br/>
<div>{{ message }}</div>
<router-view/>
<Table/>
<Users/>
</div>
</template>
<script>
import Users from './components/Users'
import Table from './components/Table'
export default {
name: 'App',
components: {
Users,
Table,
},
}
</script>
Here,I keep getting errors that cannot read property groceryList and message of undefined. I have read the documentation of vue and according to it I am not making any mistakes. So, what is the problem here?

In main.js, you should declare data as a function and pass :message to App component
new Vue({
el: '#app',
router,
components: { App },
template: '<App :groceryList="groceryList" :message="message"/>',
data () {
return {
message: 'abcdefghi',
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
}
})
and in App.vue, you need to declare groceryList and message as props
<script>
import Users from './components/Users'
import Table from './components/Table'
export default {
name: 'App',
props: ['message', 'groceryList']
components: {
Users,
Table,
},
}
</script>

Related

Issue when trying to use Nested routes in Vuejs?

main.js
import Vue from "vue";
import App from "./App.vue";
import VueRouter from "vue-router";
import HelloWorld from "./components/HelloWorld";
import User from "./components/User";
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{
path: "/",
name: "HelloWorld",
component: HelloWorld,
children: [{ path: ":id", name: "User", component: User }]
}
]
});
Vue.config.productionTip = false;
new Vue({
router,
render: (h) => h(App)
}).$mount("#app");
HelloWorld.vue
<template>
<div>
<div v-for="item in items" :key="item.id">
<b> id: {{ item.id }}</b>
<router-link :to="`/HelloWorld/${item.id}`">
{{ item.title }}
</router-link>
</div>
<!-- end v-for -->
<router-view></router-view>
</div>
</template>
<script>
import { router } from "./router";
export default {
name: "HelloWorld",
components: {},
data() {
return {
items: [],
};
},
mounted() {
router().then((r) => {
this.items = r.data;
});
},
};
</script>
codesandbox:- https://codesandbox.io/s/combined-logic-api-forked-oq808t?file=/src/main.js
in main.js routing file, if i change from path:'/' to path:'/HelloWorld' then output is not displaying. Not sure why and where it is linked with api call..
The reason why i changed from path:'/' to path:'/HelloWorld' because path:'/' in my project, it will consider as login page. So tried changing but getting blank screen.
You should change
const router = new VueRouter({
routes: [
{
path: "/HelloWorld/",
name: "HelloWorld",
component: HelloWorld,
children: [{ path: ":id", name: "User", component: User }]
}
]
});
to
const router = new VueRouter({
mode: 'history',
routes: [
{
path: "/HelloWorld/",
name: "HelloWorld",
component: HelloWorld,
children: [{ path: ":id", name: "User", component: User }]
}
]
});
(So, add mode: history, to the router.)
More on mode: history in Vue Router v3 here

Custom Event isn't be tracked by using applicationInsight within vue

I am using azure application-insight to track events of a self-built search engine written within VUE.
I wrapped the application-insight SDK as a service and export a function.
import {
ApplicationInsights
} from '#microsoft/applicationinsights-web'
const appInsights = new ApplicationInsights({
config: {
instrumentationKey: "xxxx",
autoTrackPageVisitTime: true,
enableAutoRouteTracking: true,
enableRequestHeaderTracking: true,
enableResponseHeaderTracking: true
}
})
appInsights.loadAppInsights();
appInsights.trackEvent();
export function useAppInsights() {
return appInsights
}
Then in my search-view page (search.vue), I call the service of application-insight and register two custom events to track.
`
<script>
import {
useAppInsights
} from '../services/AppInsights'
useAppInsights().trackEvent("search page loaded!");
useAppInsights().trackPageView({
name: 'search page'
});
export default {
methods: {
addQuery(key) {
useAppInsights().trackEvent({
name: 'SelectTag',
properties: {
searchInput: key
}
});
this.searchInput = key;
this.handleSearch();
},
}
};
</script>
The search.vue is integrated into the main.js using the router.
import Search from './components/Search.vue'
import Product from './components/Product.vue'
const routers = [{
path: '/search',
name: 'Search',
component: Search
},
{
path: '/product',
name: 'Product',
component: Product
},
]
export default routers
import Vue from "vue";
import VueRouter from "vue-router";
import "element-ui/lib/theme-chalk/base.css";
import routers from "./router";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import App from "./App.vue";
import axios from "axios";
Vue.config.productionTip = false;
Vue.use(VueRouter);
Vue.use(ElementUI);
Vue.use(axios);
const router = new VueRouter({
mode: "history",
routes: routers,
});
new Vue({
el: "#app",
router,
render: (h) => h(App),
});
The catalogue of my project is
But in my azure application-insight portal, I cannot see any events at all.
Does anyone have solutions to this condition? Many thanks!
I referred the following articles to realize trackevent codes:
https://dev.to/ardc_overflow/monitorando-uma-aplicacao-vuejs-com-o-application-insights-9h1
https://github.com/microsoft/applicationinsights-js#npm-setup-ignore-if-using-snippet-setup
In the second article, the sample of event tracking using application-insight is very clear:
appInsights.trackEvent({
name: 'some event',
properties: { // accepts any type
prop1: 'string',
prop2: 123.45,
prop3: {
nested: 'objects are okay too'
}
}
});
emmm...so I am trapped by the condition.

How to get Vue.set working right in Vuex?

i get a vuejs error Property or method "selectedVehicule" is not defined on the instance but referenced during render. Make sure that this property is reactive...
i think this coming from Vue.set but what i did wrong
Here is my main.js file:
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
selectedVehicle: {},
},
mutations: {
setSelectedVehicle (state, selectedVehicle) {
Vue.set(state.selectedVehicle, 'items', 'dummy1')
Vue.set(state.selectedVehicle, 'id', 'dummy2')
Vue.set(state.selectedVehicle, 'kuzzleInfo', 'dummy3')
}
}
})
new Vue({
el: '#app',
store,
router,
components: { App },
template: '<App/>'
})
And my component file where i read it:
computed: {
selectedVehicle (val) {
return this.$store.state.selectedVehicle
}
},
...
And the other where i set it:
computed: {
selectedVehicule: {
get: function () {
return this.$store.state.selectedVehicle
},
set: function (newVal) {
this.$store.commit('setSelectedVehicle', newVal)
}
}
}
fill your selectedVehicle with all the 3 properties in state object
state: {
selectedVehicle: {
items: '',
id: '',
kuzzleInfo: ''
},
}
you could try it

How do I use the render function correctly in Vue?

I'm just starting to use the render function and came across
with one problem.
When rendering, the Home component does not display app routes
registered in
App.vue
<template>
<div>
<h1>Vue Router Demo App</h1>
<p>
<router-link :to="{ name: 'home' }">Home</router-link> |
<router-link :to="{ name: 'hello' }">Hello World</router-link>
</p>
<div class="container">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {}
</script>
there are no errors in the browser console.
app.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import App from './App'
import Hello from './views/Hello'
import Home from './views/Home'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/hello',
name: 'hello',
component: Hello,
},
],
});
const app = new Vue({
el: '#app',
components: { App },
router,
});
Home.vue
with this configuration, the routes are not displayed
<script>
export default {}
import Vue from 'vue'
new Vue({
el: '#app',
render(createElement) {
return createElement("div", { class: "container" }, [
createElement("p", { class: "my-class" }, "Some cool text")
])
}
});
</script>
I just want to use the render function inside my components. Or understand how to use the render function correctly for two or more vue components.
How to configure the app correctly with switching between components
Home and Hello?
The components in Vue should be inherited from vue components and injected in the base component.
Vue.component('home', {
render(createElement) {
return createElement("div", { class: "container" }, [
createElement("p", { class: "my-class" }, "Some cool text")
])
}
})
new Vue({
el: '#app',
components: ['home'],
template: '<home/>'
})
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.11"></script>

[Vue warn]: Failed to resolve directive

I want to use a plugin in my template but for some reason it doesn’t work.
here is my code:
import Vue from 'Vue';
import vueSmoothScroll from 'vue-smooth-scroll';
Vue.use(vueSmoothScroll);
export default {
name: 'home-view',
components: {
},
layout: 'default',
mixins: [
PageHeaderFromContentData,
vueSmoothScroll,
],
data() {
return {
openLayer: null,
};
},
methods: {
},
};
And here is my template:
<a v-smooth-scroll href="#startpage-possibilities">anchor</a>
<div id="startpage-possibilities">###</div>
Thats the plugin I want to use: https://www.npmjs.com/package/vue-smooth-scroll

Categories