I have 2 vue components, I would like to pass an object from the parent to the child component.
componentA
<template lang="pug">
.wrapper
treenode(:model=treeData)
div -----------------
div {{treeData}}
</template>
<script>
import treenode from './treenode.vue'
export default {
props : ['items']
, components : { treenode : treenode }
, created(){
this.treeData = {name:"test"}
}
</script>
comp treenode
export default {
props : {
model: {
type : Object
, default : function(){ return { name : "default" } }
}
}
model in comp treenode is always the default value
You aren't passing the prop value in the child component tag correctly.
You need to wrap treeData in quotes:
treenode(:model='treeData')
Related
I am trying to modify a property routing of a parent component from a child as follows:
//- Parent
<template>
<First #toggleContent="routing = !routing" />
</template>
<script>
export default {
data() {
return { routing: true }
}
}
</script>
//- Child (First component)
<template>
<div>
<i class="bx bx-shape-triangle" #click="toggleContent()"></i>
{{routing}}
</div>
</template>
<script>
export default {
props: {
routing: Boolean
},
methods: {
toggleContent() {
this.$emit('toggleContent')
}
}
}
</script>
on the console does not mark me any error.
Your child component requires a prop routing that needs to passed in from parent component, also keep in mind always using kebab case for your events.
<First #toggle-content="routing = !routing" :routing="routing"/>
Modify your event name in emit as well:
toggleContent() {
this.$emit('toggle-content')
}
I want to add a vue component to the DOM when an option is selected from the drop down list, so it's dynamically displayed
The code that I have tried is as follows
var html = "<component :is=\"dynamickeyvalue\"></component>";
$('#extraOptionsElements').html(html);
is there anyway to load the vue component when it's added as all I am getting now is blank.
I have used the component tag to load the component dynamically. The button click will simulate the component changing feature.
<template>
<button
#click="changeComponent()"
>Click me to change component</button>
<component
:is="theSelectedComponent"
></component>
</template>
<script>
import Component1 from '#/components/Component1'
import Component2 from '#/components/Component2'
import Component3 from '#/components/Component3'
export default {
components: {
Component1,
Component2,
Component3
},
data () {
return {
theSelectedComponent: 'Component1'
}
},
methods: {
changeComponent () {
if (this.theSelectedComponent === 'Component1') {
this.theSelectedComponent = 'Component2'
} else if (this.theSelectedComponent === 'Component2') {
this.theSelectedComponent = 'Component3'
} else {
this.theSelectedComponent = 'Component1'
}
}
}
}
</script>
In React use of arrow function does the trick
class AppComponent extends Component {
componentDidMount() {
this.createAppComponent()
}
createAppComponent() {
const node = this.node
}
render() {
return <div ref={node => this.node = node}></div>
}
}
How can I initialize same node property in Vue component?
In Vue, you use the $el of a ref to get the underlying DOM element.
<my-widget ref='theWidget' />
mounted() {
const theElement = this.$refs.theWidget.$el
}
Other Comments
If you define the ref in a loop, 'theWidget' will be an array.
If the 'component' is just an HTML element (e.g. div or input) $el will be undefined because 'theWidget' will be the component reference.
I'm using ag-grid for vue, and in order to create a custom cell template, you need to define a Vue component and set it as the template, so this is how I define the column:
{
headerName: "Name",
field: "name",
template: NameLinkCell
},
And ag-grid injects into NameLinkCell, the params property for you to use:
<template>
<div class="flex center-v">
<router-link :to="{name:'policy',params:{id: id}}">{{name}}</router-link>
</div>
</template>
<script>
import Vue from "vue";
import router from "#/router";
export default Vue.extend({
router,
computed: {
id() {
return this.params.data ? this.params.data.id : "-1";
},
name() {
return this.params.data ? this.params.data.name : "";
}
}
});
</script>
I would like to create a generic component so I need this part to be dynamic:
:to="{name:'policy'
The problem is it is a metadata prop and not part of the params object passed to the component, how can I pass this extra property?
I don't understand how to pass data loaded by a 'route Component' to a 'subRoute Component'..
(I'm using Vue.js with Vue-router)
My router looks like that:
router.map({
'/a': {
component: A,
subRoutes: {
'/b': {
component: B
},
'/c': {
component: C
}
}
}
});
I just want to share data loaded by component A with component B and C.
Thanks in advance !
You have two simple options.
The ugly
Use the $parent option from the subroute components. That give you access to the parent instance, it's not the recommended way, but it's effective
// from the child component
this.$parent.someData
The good
Use props. Props give you the chance to pass any data from the parent to a child. It's better, because prevents error (you pass data not an instance) and you pass only what you need, even if it isn't part of the parent data.
// parent component
<template>
<child :childsdata="parentdata"></child>
</template
<script>
export default {
data: function () {
return {
parentdata: 'Hello!'
}
}
}
</script>
// child component
<template>
{{ childsdata }} <!-- prints "Hello!" -->
</template>
<script>
export default {
props: {
childsdata: {
type: String
}
}
}
</script>