I'm new with vue.js so forgive me if what I write does not make sense to you. It's not totally clear to me how to use render function inside a .vue file component.
I got a component in a .vue file like this:
<template>
<transition name="slide-fade">
<div class="drop-list" v-html="items">
</div>
</transition>
</template>
<style>
</style>
<script>
export default{
name: "drop-item",
props:['items'],
data(){
return{}
},
render(createElement) {
// create the list
}
}
</script>
Basically I have 3 component that alternately sends content ("items") to this one, mi goal is to render an unordered list inside it with a "#click='doSomenthing'" directive inside every list-element and "doSomething" depends on which is the component that sent the items to this one.
Any help will be appreciated
Firstly, you do not put render functions inside components, you simply pass the data as a prop. If you need to know which component passed the list of items, then you can simply pass a prop to let your component know what action to take, here's a basic example:
<template id="my-list">
<div>
<ul>
<li v-for="item in items">{{item}}</li>
</ul>
</div>
</template>
<script type="text/javascript">
export default {
props: ['items', 'action'],
methods: {
doSomething() {
switch (this.action) {
case 1:
console.log("I'm doing action 1");
break;
case 2:
console.log("I'm doing action 2");
break;
default:
console.log("I'm doing default action");
}
}
}
}
</script>
You can then set the component up in our parent and pass an action, I'm just passing a number here:
<my-list :items="items" :action="2"></my-list>
Here's a JSFiddle: https://jsfiddle.net/uckgucds/
If you are writing complex actions then you may want to write separate components for each list type, rather than a switch statement, you can then use a mixin to create the duplicate sections.
Related
I want to run the sub component’s method from the parent component in vue to refresh some areas of that component. Here is an example of what I want.
Home.vue
<template>
<componentp></componentp>
</template>
<script>
.....
methods:{
parentMethod(){
//I want to call to methodx in componentp
}
}
...
</script>
componentp.vue
<template>
..............
</template>
<script>
....
methods:{
methodx(){
//Run me from parent
}
}
}
...
</script>
I want to call methodx in sub component how can i do it.?
you can watch parent of parameter from component and run function in component after change parent parameter.
see this link.
i need run function in component from page with data page
<template>
<componentp ref="componentp"></componentp>
</template>
<script>
.....
methods:{
parentMethod(){
//I want to call to methodx in componentp
this.$refs.componentp.methodx()
}
}
...
</script>
If you cannot do what #Chris G says, another alternative could be to use a watcher:
https://v2.vuejs.org/v2/guide/computed.html#Watchers
Create some 'control' variable and watch if it changes to make your process.
I'm a bit new to the component's world and trying to figure out a thing, how the parent child relationship works in components. I've seen some examples of some component libraries where they have some parent child components to be defined and those are used as the child components. For example, table and tr:
<my-table> <!-- Parent -->
<my-tr> </my-tr> <!-- Child -->
</my-table>
Now, I assume, that child works for parent via slots. So the parent should be defined something like this:
<template>
<div>
<slot></slot>
</div>
</template>
Now the parent element can have multiple <my-tr> as well. And slot should be rendering all of those. However, I am trying to a similar thing but a little more complex than that.
I am trying to create a slider with this approach. Where there is a my-slider component and my-slider-item components used to define inside my-slider component. And then I want to control the visibility of the child components defined in the parent component slot by modifying it's properties.
It should be looking like this:
<my-slider>
<my-slider-item>Item 1</my-slider-item>
<my-slider-item>Item 2</my-slider-item>
<my-slider-item>Item 3</my-slider-item>
</my-slider>
my-slider component
<template>
<div class="my-slider">
<slot></slot>
</div>
</template>
my-slider-item component
<template>
<div class="my-slider__item">
<slot></slot>
</div>
</template>
Now how can I know in the parent that how many <my-slider-item> are defined in the parent slot and based on that I want to control the visibility of the child 1 at a time as it is going to work as the slider.
I'm not sure but I missing some basic concept here which I was not getting after looking at tons of example since yesterday. If anyone can please help here? Thanks a lot!
The parent-child relationship is actually established by importing the child component into the parent component, and including the child in the parent's 'components' option.
I created an example scenario with simple Parent and Child component definitions in order to show a standard relationship implementation. Built with Vue 2 and the Vue CLI.
MySlider.vue (parent)
<template>
<div class="my-slider">
<h4>My Slider</h4>
<my-slider-item v-for="(item, index) in sliderItems" :key="index" :sliderItem="item" />
</div>
</template>
<script>
import MySliderItem from './MySliderItem.vue'
export default {
components: {
MySliderItem
},
data() {
return {
sliderItems: [
{
name: 'Slider Item 1'
},
{
name: 'Slider Item 2'
},
{
name: 'Slider Item 3'
}
]
}
}
}
</script>
MySliderItem.vue (child)
<template>
<div class="my-slider-item">
<h5>{{ sliderItem.name }}</h5>
</div>
</template>
<script>
export default {
props: {
sliderItem: {
type: Object,
required: true
}
}
}
</script>
So after following a beginner Vue tutorial to setup a Todo app, I decided to try to adapt some parts of it for a website I'm trying to make. What I'm stuck on is that despite everything saying my for-loop is supposed to work, it doesn't.
The project itself was created using the vue-cli, and most of the code copy-pasted from the tutorial. (which is working fine with its own for-loop)
It seems like the data might be not passed onto the template maybe?
I have tried:
having the info inside the props and data sections
passing whole object and only parameters to the template
tried with hard-coded values inside array which is iterated on
(After setting up a new vue-cli project:)
App.vue:
<template>
<div id="app">
<create-section v-on:create-section="addSection" />
<section v-for="section in sections" v-bind:key="section.title" :info="section"></section>
</div>
</template>
<script>
import CreateSection from "./components/CreateSection";
import Section from "./components/Section";
export default {
name: "App",
components: {
CreateSection,
Section
},
data() {
return {
sections: []
};
},
methods: {
addSection(section) {
this.sections.push({
title: section.title,
description: section.description
});
console.log(
"Added to sections! : " + section.title + " | " + section.description
);
console.log("Sections length: " + this.sections.length);
}
}
};
</script>
Section.vue
<template>
<div class="ui centered card">
<div class="content">
<div class="header">{{ info.title }}</div>
<div>{{ info.description }}</div>
</div>
</div>
</template>
<script type = "text/javascript" >
export default {
props: {info: Object},
data() {
return {};
}
};
</script>
Expected result:
Display Section template on the website (after creating it with addSection that another script calls. Not included for brevity)
Actual result:
Nothing is displayed, only a empty tag is added
I believe the problem is that you've called it Section. As <section> is a standard HTML element you can't use it as a component name.
There is a warning built into the library but it seems to be case sensitive, which isn't entirely helpful. Try changing your components section to this:
components: {
CreateSection,
section: Section
},
You should then see the warning.
The fix would just be to call it something else.
This is mentioned in the first entry in the style guide:
https://v2.vuejs.org/v2/style-guide/#Multi-word-component-names-essential
section is an existing HTML5 element, you should name your section component something different.
If you really want to name the component Section, register it as 'v-section'
The problem is that when you do the loop in the <section v-for="section in sections" v-bind:key="section.title" :info="section"></section> the Array sections is not ready, there is nothing there.. so when you add new things to this array you need to trigger (computed prop) to send again the data to the section component.
Aside from the issue with using an existing HTML5 command as a name for your Vue component (you should change that to another name by the way), you should also look into how you declared the props within Section.vue. The code below shows the correct way to do it:
<script type = "text/javascript" >
export default {
props: ['info'],
data() {
return {};
}
};
</script>
The props take in the name of the property being declared from the parent component and should be a string.
Hope this helps.
How can I write my component to wrap another vue component, while my wrapper component get some extra props? My wrapper template component should be:
<wrapper-component>
<v-table></v-table> <!-- pass to v-table all the props beside prop1 and prop2 -->
</wrapper-component>
and the wrapper props:
props: {
prop1: String,
prop2: String
}
Here I want to wrap a table component, and pass to the table component all the props and events that were passed to the wrapper, beside two extra props prop1 and prop2. What is the correct way of doing this in vue?
And is there a solution for events too?
Place the component you wish to wrap into the template of the wrapper component, add v-bind="$attrs" v-on="$listeners" to that component tag, then add the inner component (and, optionally, inheritAttrs: false) to the wrapper component's config object.
Vue's documentation doesn't seem to cover this in a guide or anything, but docs for $attrs, $listeners, and inheritAttrs can be found in Vue's API documentation. Also, a term that may help you when searching for this topic in the future is "Higher-Order Component" (HOC) - which is basically the same as your use of "wrapper component". (This term is how I originally found $attrs)
For example...
<!-- WrapperComponent.vue -->
<template>
<div class="wrapper-component">
<v-table v-bind="$attrs" v-on="$listeners"></v-table>
</div>
</template>
<script>
import Table from './BaseTable'
export default {
components: { 'v-table': Table },
inheritAttrs: false // optional
}
</script>
Edit: Alternatively, you may want to use dynamic components via the is attribute so you can pass in the component to be wrapped as a prop (closer to the higher-order component idea) instead of it always being the same inner component. For example:
<!-- WrapperComponent.vue -->
<template>
<div class="wrapper-component">
<component :is="wraps" v-bind="$attrs" v-on="$listeners"></component>
</div>
</template>
<script>
export default {
inheritAttrs: false, // optional
props: ['wraps']
}
</script>
Edit 2: The part of OP's original question that I missed was passing all props EXCEPT one or two. This is handled by explicitly defining the prop on the wrapper. To quote the documentation for $attrs:
Contains parent-scope attribute bindings (except for class and style) that are not recognized (and extracted) as props
For example, example1 is recognized and extracted as a prop in the snippet below, so it doesn't get included as part of the $attrs being passed down.
Vue.component('wrapper-component', {
template: `
<div class="wrapper-component">
<component :is="wraps" v-bind="$attrs" v-on="$listeners"></component>
</div>
`,
// NOTE: "example1" is explicitly defined on wrapper, not passed down to nested component via $attrs
props: ['wraps', 'example1']
})
Vue.component('posts', {
template: `
<div>
<div>Posts component</div>
<div v-text="example1"></div>
<div v-text="example2"></div>
<div v-text="example3"></div>
</div>
`,
props: ['example1', 'example2', 'example3'],
})
new Vue({
el: '#app',
template: `
<wrapper-component wraps="posts"
example1="example1"
example2="example2"
example3="example3"
></wrapper-component>
`,
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>
I have a v-for loop in vuejs that displays a component on each iteration. This is an autocomplete component that searches and displays product names when a user types in the input box.
I have a #change="setProduct" attribute on each component that correctly calls my setProduct method in my parent component.
But how can I know which of component was updated? All thats passed to the setProduct method is the details of the product that was emitted, but I don't know which component emitted the event to know which line to update.
Here is some relevant code:
This is in the parent component
<template>
<div class="row" v-for="line, i in invoice.InvoiceLines">
<div class="col-xs-5">
<auto-complete :list="productList" :value="line.Product.name" #change="setProduct"></auto-complete>
</div>
...
</div>
</template>
<script>
export default {
data() {
return {
invoice:{},
productList:[]
},
}
methods:{
setProduct(product){
//product has the details of the new product that was selected. But I don't know which invoice line it is referring to.
},
}
}
</script>
The component responds to a user clicking a selection in a dropdown, and then issues $emit('change', product);
The component has no knowledge of the parent component, so it doesn't know which invoice line it refers to. I could pass the index into the child component and then pass it back out, but that seems anti-pattern for vue.
Maybe there is an easier way for me to go about this?
Thanks for your help.
Since you're using v-for, so you can actually retrieve the index of the items in invoice.InvoiceLines and you can pass whatever your want into setProduct:
<template>
<div class="row" v-for="(line, i) in invoice.InvoiceLines">
<div class="col-xs-5">
<auto-complete
:list="productList"
:value="line.Product.name"
#change="setProduct(line, i, $event)"></auto-complete>
</div>
...
</div>
</template>
Then in JavaScript:
methods: {
setProduct(product, index, event){
// product - the 'line' responsible in invoice.InvoiceLines
// index - the index of line in invoice.InvoiceLines
// event - the event object
},
}