I saw many answers telling to use vue-devtools to access the Vue Object but is there a way to do it in the browser console? Like in the tutorial, we enter
> app.data.sock
in console to get the data
Let's say:
main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
HelloWorld.vue
<template>
<div class="hello">
<ul>
<li v-for="title in titles" :key="title.id">{{ title.name }}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
titles: [{
id: 0,
name: "a"
},
{
id: 1,
name: "b"
}]
}
}
}
</script>
How do I access the data of 'titles' in HelloWorld.vue? In other word, how to get this.data.titles[0].name in the HelloWorld.vue in the browser console? Thank you
You can access the value of data function in created our mounted hooks of Vue lifecycle or can create a function in methods. I am calling your data in created hook
<script>
export default {
name: 'HelloWorld',
data() {
return {
titles: [{
id: 0,
name: "a"
},
{
id: 1,
name: "b"
}]
}
},
created(){
console.log(this.data.tiles)
}
}
</script>
Related
I'm having trouble getting a route param to pass directly into a component. I followed multiple sets of directions in the docs (including using the Composition API as in the following code), but I'm still getting undefined when the CourseModule.vue first renders.
Route Definition
{
path: '/module/:id',
name: 'Course Module',
props: true,
component: () => import('../views/CourseModule.vue'),
},
CourseModule.vue:
<template>
<div class="AppHome">
<CustomerItem />
<CourseModuleItem :coursemodule-id="this.CoursemoduleId"/>
</div>
</template>
<script>
import { useRoute } from 'vue-router';
import CustomerItem from '../components/customers/customer-item.vue';
import CourseModuleItem from '../components/coursemodules/coursemodule-item.vue';
export default {
setup() {
const route = useRoute();
alert(`CourseModule.vue setup: ${route.params.id}`);
return {
CoursemoduleId: route.params.id,
};
},
components: {
CustomerItem,
CourseModuleItem,
},
mounted() {
alert(`CourseModule.vue mounted: ${this.CoursemoduleId}`);
},
};
</script>
coursemodule-item.vue:
<template>
<div id="module">
<div v-if="module.data">
<h2>Course: {{module.data.ModuleName}}</h2>
</div>
<div v-else-if="module.error" class="alert alert-danger">
{{module.error}}
</div>
<Loader v-else-if="module.loading" />
</div>
</template>
<script>
import Loader from '../APILoader.vue';
export default {
props: {
CoursemoduleId: String,
},
components: {
Loader,
},
computed: {
module() {
return this.$store.getters.getModuleById(this.CoursemoduleId);
},
},
mounted() {
alert(`coursemodule-item.vue: ${this.CoursemoduleId}`);
this.$store.dispatch('setModule', this.CoursemoduleId);
},
};
</script>
The output from my alerts are as follows:
CourseModule.vue setup: zzyClJDQ3QAKuQ2R52AC35k3Hc0yIgft
coursemodule-item.vue: undefined
CourseModule.vue mounted: zzyClJDQ3QAKuQ2R52AC35k3Hc0yIgft
As you can see, the path parameter works fine in the top level Vue, but not it's still not getting passed into the component.
your kebab-cased :coursemodule-id props that you're passing to the CourseModuleItem component becomes a camelCased coursemoduleId props
Prop Casing (camelCase vs kebab-case)
try this
// coursemodule-item.vue
...
props: {
coursemoduleId: String,
},
...
mounted() {
alert(`coursemodule-item.vue: ${this.coursemoduleId}`);
this.$store.dispatch('setModule', this.coursemoduleId);
},
Do you know how to change a component dynamically with object prop
App.vue
<template>
<div id="app">
<component :is="current['test'].target.name"> </component>
<input type="button" value="click me" #click="change" />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
import Comp from "./components/Comp.vue";
export default {
name: "App",
components: {
HelloWorld,
Comp,
},
data() {
return {
current: {},
};
},
created() {
this.current["test"] = {
index: 0,
target: {
name: "Comp",
},
};
},
methods: {
change() {
const r =
this.current["test"].target.name === "HelloWorld"
? "Comp"
: "HelloWorld";
this.current["test"].target = {
name: r,
};
console.log(this.current["test"]);
},
},
};
</script>
Comp.vue
<template>
<p>Template 2</p>
</template>
HelloWorld.vue
<template>
<p>Template 1</p>
</template>
https://codesandbox.io/s/clever-water-dgbts?file=/src/components/HelloWorld.vue:0-42
The value of the object will change correctly but not the component.
Thank you
The issue here is that the property test is not defined on the object current in the data definition - you're setting the definition in the created() function. This means that Vue does not know to create the reactive getter/setter for that property.
Change your data definition to:
data() {
return {
current: {
test: {
index: 0,
target: {
name: "Comp"
}
}
}
};
}
It is because of the way Vue does its reactivity (requiring pre-defined properties) that I would recommend steering clear of accessing properties as dictionary items i.e. use:
current.test.target.name
instead of
current['test'].target.name
For more information on Vue reactivity see this page: link
I have the following app:
<template>
<component :is="layout">
<router-view :layout.sync="layout"/>
</component>
</template>
<script>
import LayoutBlank from './LayoutBlank'
export default {
name: 'app',
data() {
return {
layout: LayoutBlank,
};
},
}
</script>
<script>
import LayoutBlankTemplate from './LayoutBlankTemplate'
export default {
name: 'LayoutBlank',
created() {
this.$parent.$emit('update:layout', LayoutBlankTemplate);
},
render() {
return this.$slots.default[0];
},
}
</script>
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'LayoutBlankTemplate',
}
</script>
<template>
<layout-blank>
Test content
</layout-blank>
</template>
<script>
import LayoutBlank from './LayoutBlank';
export default {
name: 'BlankTest',
components: {LayoutBlank},
}
</script>
All works fine. But now I would like to add one more slot to the LayoutBlankTemplate:
<template>
<div>
<slot></slot>
<slot name="second"></slot>
</div>
</template>
<script>
export default {
name: 'LayoutBlankTemplate',
}
</script>
and use it in BlankTest:
<template>
<layout-blank>
<template #default>Test content</template>
<template #second>Second test content</template>
</layout-blank>
</template>
<script>
import LayoutBlank from './LayoutBlank';
export default {
name: 'BlankTest',
components: {LayoutBlank},
}
</script>
The code renders only the default slot content. The problem is that I'm using the return this.$slots.default[0]; in LayoutBlank component which renders only the default slot content.
I cannot find the way how to render all slots in LayoutBlank::render() method. I know that I'm able to get the slots list using this.$slots or this.$scopedSlots but I can't find the way how to pass them to the LayoutBlankTemplate to make them render.
You could put the slots into elements you create I believe. This is mentioned (briefly) in the render function documentation.
This may not be exactly the layout you want, but for example,
<script>
import LayoutBlankTemplate from './LayoutBlankTemplate'
export default {
name: 'LayoutBlank',
created() {
this.$parent.$emit('update:layout', LayoutBlankTemplate);
},
render(createElement, context) {
return createElement('div', {}, [
createElement('div', {}, this.$slots.default),
createElement('div', {}, this.$slots.second)
])
},
}
</script>
EDIT --- SOLVED
It turns out that isn't really a problem, Vue will auto-bind for you so there's no need to bind manually.
END EDIT ---
I'm trying to pass a method to a callback(or event) to a child component.
Everything works great, except that the function executes in the wrong context.
In react, I would bind the functions in the constructor, I'm not sure what's the solution is in Vue.
Example
<template>
<div id="app">
<Header/>
<Tasks
:todos="todos"
#onMarkAsDone="markAsDone"
>
</Tasks>
</div>
</template>
<script>
import Header from './components/Header.vue';
import Tasks from './components/Tasks.vue';
export default {
name: 'my-component',
data() {
return {
name: 'Tasks',
todos: [{
id:0,
text:'Complete this by lunch',
isDone: false
}]
}
},
methods: {
markAsDone(id) {
console.log(this); // refers to the child component
// can't access this.todos
}
},
components: {
Tasks,
Header
}
}
</script>
Here's the solution to it, turns out you can use the 'created' life cycle hook, this is similar to react when binding in a constructor
<template>
<div id="app">
<Header/>
<Tasks
:todos="todos"
#onMarkAsDone="markAsDone"
>
</Tasks>
</div>
</template>
<script>
import Header from './components/Header.vue';
import Tasks from './components/Tasks.vue';
export default {
name: 'my-component',
data() {
return {
name: 'Tasks',
todos: [{
id:0,
text:'Complete this by lunch',
isDone: false
}]
}
},
methods: {
markAsDone(id) {
console.log(this.todos); // can now access the correct 'this'
}
},
created() {
this.markAsDone = this.markAsDone.bind(this);
},
components: {
Tasks,
Header
}
}
</script>
Sub component code
<template>
<ul>
<li
:class="{isDone:todo.isDone}"
:key="todo.id"
v-for="todo in todos">
<input type='checkbox' #change="markAsDone(todo.id)"/>
{{todo.text}}
</li>
</ul>
</template>
<script>
export default {
name: 'Tasks',
props: ['todos'],
methods: {
markAsDone(id) {
this.$emit('onMarkAsDone', id);
}
}
}
</script>
You can return function in a markAsDone method, like this:
markAsDone() {
return id => {
console.log(this.todos);
}
},
and then when passing method as a prop call it:
:onMarkAsDone="markAsDone()"
Then you can call the prop method inside your Child-Component.
That should give you requested functionality without using bind in created() hook.
I got "artists prop is Undefined" error in the console
Structure of components:
Discover > ArtistSlider > ArtistItem
Discover passes the prop artists to ArtistSlider and it does it only when all the data is received from API. But ArtistSlider throws the error that prop artists is undefined for some reason. At the same time, ArtistItem doesn't throw an error despite it is the child of ArtistSlider and it receives the prop artist from ArtistSlider.
I read about vue lifecycle but still cannot get why it happens. Especially in the middle of the ​component tree.
Discover:
<template>
<div>
<h1>Discover page</h1>
<artist-slider :artists="collection.new_artists"/>
</div>
</template>
<script>
import store from "#/store";
import Page from "#/mixins/Page";
import ArtistSlider from "#/components/ArtistSlider";
export default {
extends: Page,
async beforeRouteEnter(to, from, next) {
const collection = await store.dispatch("fetchUrl", {
url: "discover",
params: { location: "uae" }
});
console.log('Received collection from API', collection)
next(vm => (vm.collection = collection));
},
components: {
ArtistSlider,
},
created() {
console.log('Discover Created', this.collection)
}
};
</script>
ArtistSlider:
<template>
<section>
<h2>New Artists</h2>
<ul>
<artist-item
v-for="artist in artists"
:key="artist.slug"
:artist="artist"
/>
</ul>
</section>
</template>
<script>
import ArtistItem from './ArtistItem'
export default {
name: "AppArtistSlider",
props: {
artists: {
required: true,
type: Array
}
},
components: {
ArtistItem
},
created() {
console.log('Slider Created', this.artists)
}
};
</script>
<style lang="scss" scoped>
</style>
ArtistItem:
<template>
<li>
<app-image :src="artist.avatar.small" :alt="artist.full_name" />
<h3>{{artist.full_name}}</h3>
<p>{{artist.art_type.name}}</p>
</li>
</template>
<script>
import AppImage from './AppImage.vue'
export default {
name: 'ArtistItem',
props: {
artist: {
required: true,
type: Object
},
},
components: {
AppImage
},
created() {
console.log('Item Created', this.artist)
}
}
</script>
Will apreciate any help. Thanks!