[Vuejs]-Capture html within a component

by

0👍

It looks like you’re trying to create a universal <field> that you can pass the type of input you want.

Can I suggest a different approach?

First component

<template>
    <div id="login">
      <field type="select" :options="options" name="lang"></field>
    </div>
</template>
<script>
export default {
  data () {
    return {
      options: [
        { label: 'one', value: 'value1' },
        { label: 'zero', value: 'value2' }
      ]
    }
  }
}
</script>

Second component:

<template>
      <div class="field input">
        <label>{{ label }}</label>

        <select v-if="type === 'select'">
          <option v-for="option in options" :value="option.value" :key="option.value">{{ option.label }}</option>
        </select>

        <input v-if="type === 'text'" type="text">
        <input v-if="type === 'number'" type="number">
    </div>
</template>
<script>
export default {
  props: ['label', 'type', 'options']
}
</script>

Here, instead of writing the <option> elements in the parent template, we create option objects in an array called options and pass it to <field> as a prop, then we can render the <option> elements in the child IF the 'type' === 'select'.

Leave a comment