Question

47

how to create a select in vue's createElement?

rated 0 times [ 48] [ 1] / answers: 1 / hits: 33035 / 7 Years ago, sun, march 12, 2017, 12:00:00

I have a vue component that uses template, I'd like to change it to use render function, I know createElement('h1', 'title'), but how to use it with something like 'select' with all the options? here is the template based component:

https://jsfiddle.net/aaoehLqe/

<div id=app>

  <p>{{ message }}</p>

  <myselect  v-bind:option= option ></myselect>

  {{option}}

</div>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

brianaclaras

Add To Favorites

Follow

Total Points: 23

Total Questions: 106

Total Answers: 111

Location: Japan

Member since Sat, Jun 6, 2020

4 Years ago

brianaclaras questions

1 Type ref is not assignable to type IntrinsicAttributes

Fri, Oct 15, 21, 00:00, 3 Years ago

1 Why is `Promise.then` called twice in a React component but not the console.log?

Wed, Jul 7, 21, 00:00, 3 Years ago

1 when to use Nextjs over the React itself?

Thu, Dec 3, 20, 00:00, 4 Years ago

1 Typeorm find with and & or where block

Mon, May 25, 20, 00:00, 4 Years ago

1 Adding File to Azure Storage Blob from Angular

Wed, Mar 4, 20, 00:00, 4 Years ago

View All

answered 7 Years ago shianncaylinc · Accepted Answer

Here is the select component with createElement:

Vue.component('myselect', {

  props: ['option'],

  render: function(createElement) {

    var self = this

    return createElement(

      'select', {

        domProps: {

          value: self.option.value

        },

        on: {

          input: function(event) {

            self.option.value = event.target.value

          }

        }

      }, [

        createElement('option', {

          attrs: {

            value: 0

          }

        }, 'Under 1'),

        createElement('option', {

          attrs: {

            value: 1

          }

        }, '1'),

      ]

    )

  },

})

You can see the working fiddle here: https://jsfiddle.net/aaoehLqe/1/

To understand how it works, you can see the API details of createElement in docs:

// @returns {VNode}

createElement(

  // {String | Object | Function}

  // An HTML tag name, component options, or function

  // returning one of these. Required.

  'div',

  // {Object}

  // A data object corresponding to the attributes

  // you would use in a template. Optional.

  {

    // (see details in the next section below)

  },

  // {String | Array}

  // Children VNodes. Optional.

  [

    createElement('h1', 'hello world'),

    createElement(MyComponent, {

      props: {

        someProp: 'foo'

      }

    }),

    'bar'

  ]

)