Creating an Array for All My Render Functions VueJS

Question

CLARIFICATION
I realize that I did not write my question very well (sorry about that). I have therefore rewritten my question and the accompanying examples.

I want to create a number of components using the Render Function in VueJS. Each function will basically be the same format, just the data inserted will change. It seems to me rather repetitive (and not at all DRY) to rewrite the render function each and every time just to create different components (when the basic structure of each component is the same).

As such, what I'd like to do is create an array that holds all the data I want to use for the various different components. I then want to loop through that data, running the Render Function each time.

For instance, imagine that this is my data:

var components = [
        { name: 'label',
          props: ['tag', 'type', 'size', 'color', 'direction'],
          class: 'label',
          tagOption: true,
          tag: 'div'},

        { name: 'icon',
          props: ['type', 'size', 'color'],
          class: 'icon',
          tagOption: false,
          tag: 'i'}
    ]

Running the loop on this data would be the equivalent of writing the Render Function twice as follows:

Label Component

export label {
    props: ['tag', 'type', 'size', 'color', 'direction'],
    render(createElement) {
        let classes = ['ui', 'label']
        if (this.type) { classes.push(this.type) }
        if (this.size) { classes.push(this.size) }
        if (this.color) { classes.push(this.color) }
        if (this.direction) { classes.push(this.direction) }

        return createElement(
            this.tag || 'div',
            { class: classes },
            this.$slots.default
        );
    }
}

Icon Component

export icon {
    props: ['type', 'size', 'color'],
    render(createElement) {
        let classes = ['ui', 'label']
        if (this.type) { classes.push(this.type) }
        if (this.size) { classes.push(this.size) }
        if (this.color) { classes.push(this.color) }

        return createElement(
            'i',
            { class: classes },
            this.$slots.default
        );
    }
}

In summary

This is what I do not want to do: Have a label.js (or label.vue) file which runs the Render Function to create a label component and a separate icon.js file which runs the basically the exact same Render Function to create an icon component

This is what I do want to do: Have one file which would loop through an array of data, running and exporting that data each loop through the Render Function.

Is this possible? If so, any ideas on how to do it?

Thanks.

Please clarify your desired output in the end. What is your goal? Do you want to emulate v-for and render a list of children for every person? Here's how the child nodes are created inside a render function: vuejs.org/v2/guide/render-function.html#createElement-Arguments and here's v-for emulation: vuejs.org/v2/guide/render-function.html#v-if-and-v-for — Egor Stambakio
– Egor Stambakio, Commented May 18, 2017 at 15:09
@wostex I rewrote my question to better explain my question. — Moshe
– Moshe, Commented May 21, 2017 at 13:34

Bert · Accepted Answer · 2017-05-21 16:41:36Z

1

There are a couple ways you could do this. Here is one registering components as global components.

for (let tmpl of components){
  let render = function(createElement){
    let classes = ["ui", tmpl.name]  
    const props = tmpl.props.slice(1)
    for (let prop of props)
      if (this[prop]) classes.push(this[prop])

    return createElement(tmpl.tag, {class: classes}, this.$slots.default)
  }

  Vue.component(`${tmpl.name}-component`,{
    props: tmpl.props,
    render
  })
}

new Vue({
  el:"#app"
})

Example template:

<div id="app">
  <label-component direction="horizontal">stuff</label-component>
  <icon-component size="large" color="blue">Other stuff</icon-component>
</div>

Example.

If you didn't want global components you could do this.

let components = {}
for (let tmpl of componentTemplates){
  let render = function(createElement){
    let classes = ["ui", tmpl.name]  
    const props = tmpl.props.slice(1)
    for (let prop of props)
      if (this[prop]) classes.push(this[prop])

    return createElement(tmpl.tag, {class: classes}, this.$slots.default)
  }

  components[`${tmpl.name}-component`] = {
    props: tmpl.props,
    render 
  }
}

new Vue({
  el:"#app",
  components
})

Example.

edited May 21, 2017 at 16:41

answered May 18, 2017 at 15:59

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Moshe Over a year ago

Thanks for you answer. I was not clear in what I was asking (sorry about that). I rewrote my question to better explain my question.

Moshe Over a year ago

Thanks - that is very helpful (again)

Egor Stambakio · Accepted Answer · 2017-05-21 19:25:35Z

You can generate your components outside of Vue declaration:

(I renamed components because Vue doesn't like it when you use common HTML tag names like label or icon as components names)

const components = [
  { name: 'child1',
    props: ['tag', 'type', 'size', 'color', 'direction'],
    class: 'label',
    tagOption: true,
    tag: 'div'},
  { name: 'child2',
    props: ['type', 'size', 'color'],
    class: 'icon',
    tagOption: false,
    tag: 'i'}
];

// function to generate components
const generateComponents = components => components
  .map(c => Object.assign({[c.name] : {
    props: c.props,
    render: function(createElement) {
        const classes = ['ui', 'label'];
        classes.push(c.class); // I suppose you've forgot this?
        if (this.type) { classes.push(this.type) };
        if (this.size) { classes.push(this.size) };
        if (this.color) { classes.push(this.color) };
        if (this.direction) { classes.push(this.direction) };

        return createElement(
            c.tag || 'div',
            { class: classes },
            this.$slots.default
        );
      }
    }
  })).reduce((a, v) => Object.assign(a, v), {});

// here you are
const myComponents = generateComponents(components);

new Vue({
  el: '#app',
  components: myComponents
});

.green { color: green; font-weight: bold }
.mytype { background-color: beige }

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <child1 type="mytype">hello</child1>
  <child2 color="green">hello again</child2>
</div>

Collectives™ on Stack Overflow

Creating an Array for All My Render Functions VueJS

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related