title: Vue2.x: How to dynamically render an element using a custom function?
body: <p>I used to use React.js but currently I'm learning Vue.js.</p>
  <p>Now I need to dynamically render a part of an element, so I tried to render an jsx like this:</p>
  <p>This is a simplified example:</p>
  <h3>UserListView.vue</h3>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;UserList :users=&quot;users&quot; :columns=&quot;columns&quot;&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import UserList from './UserList';
  
  export default {
    components: {
      UserList,
    },
    data() {
      return {
        users: [ 
          { id: 0, name: 'Alice', age: 18, gender: 'F' },
          { id: 1, name: 'Bob', age: 18, gender: 'M' },
        ],
        columns: [
          { name: 'name', label: 'Name' },
          { name: 'age', label: 'Age' },
          // element with custom render function
          { name: 'gender', label: 'Gender', render: user =&gt; (
            &lt;div&gt;{ user.gender === 'M' ? 'Male' : 'Female' }&lt;/div&gt;
          ) },
        ]
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  <h3>UserList.vue</h3>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;table class=&quot;UserList&quot;&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th v-for=&quot;column in columns&quot; :key=&quot;`column_${column.name}`&quot; :class=&quot;column.name&quot;&gt;
            {{ column.label }}
          &lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr v-for=&quot;user in users&quot; :key=&quot;`user_${user.id}`&quot;&gt;
          &lt;td v-for=&quot;column in columns&quot; :key=&quot;column.name&quot; :class=&quot;column.name&quot;&gt;
            {{column.render ? column.render(user) : user[column.name]}}
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: ['users', 'columns'],
  };
  &lt;/script&gt;
  </code></pre>
  <p>But this throws me an error:</p>
  <p><a href="https://i.stack.imgur.com/8EqwE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8EqwE.png" alt="enter image description here" /></a></p>
  <p>So is there a way that I can pass a template into the child and tell it how to render with some arguments? Can it be done with <code>slot</code>? Or is there another way to do it?</p>