CODEWITHSUNDEEP
laravel-5vue.js
sanders
sanders

Reputation: 10898

Vuejs - Passing attribute name to a Child component

I am trying to create a Vue SelectComponent. One of the attributes I am want to pass to the component is the name of the Select like so:

<select-component selectName="providers"></select-component>

And in my component I have :

<template>
    <select :name="{selectName}" >
        <option value="bla">{{selectName}}</option>
    </select>
</template>

<script>
  export default {
    props: ['selectName'],
    data() {
      return {

      }
    }
  }
</script>

<style scoped>

</style>

However, when I look at my chromeDev tools I see it generated:

<select data-v-674655fa="" data-v-70be8f72="" name="[object Object]"><option data-v-674655fa="" value="bla">providers</option></select>

Note: name="[object Object]" Expected is : name="providers"

I am using Vuejs in a Laravel project.

Many thanks.

Upvotes: 0

Views: 98

Answers (1)

Georgi Antonov
Georgi Antonov

Reputation: 1641

<template>
    <select :name="selectName" > //without the brackets
        <option value="bla">{{selectName}}</option>
    </select>
</template>

Upvotes: 1

Related Questions