PortaFront/src/components/agregarLibro.vue

<template>
    <b-container fluid>
        <b-row class="mb-2">
            <b-col class="mt-5 mb-3">
                <h1  style="text-align:center;">Agregar Libro</h1>
            </b-col>
        </b-row>
        <b-row class="mb-2">
            <b-col>
                <b-form-input
                id="inline-form-input-name"
                class="mb-2 mr-sm-2 mb-sm-0"
                placeholder="ISBN"
                ></b-form-input>
            </b-col>
            <b-col>
                <b-form-input
                id="inline-form-input-name"
                class="mb-2 mr-sm-2 mb-sm-0"
                placeholder="Titulo"
                ></b-form-input>
            </b-col>
            
        </b-row>
            <b-row class="mb-2">
                <b-col>
                    <b-dropdown  v-bind:text="categoria" block split split-variant="outline-primary" variant="primary" class="m-2">
                        <b-dropdown-item @click="categoria='Ciencias Socioeconómicas'" >Ciencias Socioeconómicas</b-dropdown-item>
                        <b-dropdown-item @click="categoria='Diseño y Edificación'" >Diseño y Edificación</b-dropdown-item>
                        <b-dropdown-item @click="categoria='Enseñanza de Idiomas'" >Enseñanza de Idiomas</b-dropdown-item>
                        <b-dropdown-item @click="categoria='Estudios de Posgrado'" >Estudios de Posgrado</b-dropdown-item>
                        <b-dropdown-item @click="categoria='Humanidades'" >Humanidades</b-dropdown-item>
                        <b-dropdown-item @click="categoria='Matemáticas e Ingenieria'" >Matemáticas e Ingenieria</b-dropdown-item>
                        <b-dropdown-item @click="categoria='Universidad Abierta y Educación a Distancia'" >Universidad Abierta y Educación a Distancia</b-dropdown-item>
                    </b-dropdown>
                </b-col>
                <b-col>
                    <b-form-input
                    id="inline-form-input-name"
                    class="mb-2 mr-sm-2 mb-sm-0"
                    placeholder="Autor"
                    ></b-form-input>
                </b-col>
        </b-row>
            <b-row class="mb-2">
            <b-col>
                <b-form-input
                id="inline-form-input-name"
                class="mb-2 mr-sm-2 mb-sm-0"
                placeholder="Numero de paginas"
                ></b-form-input>
            </b-col>
            <b-col>
                <b-form-input
                id="inline-form-input-name"
                class="mb-2 mr-sm-2 mb-sm-0"
                placeholder="Precio"
                ></b-form-input>
            </b-col>
        </b-row>
        <b-row class="mb-2">
            <b-col>
                <b-form-input
                id="inline-form-input-name"
                class="mb-2 mr-sm-2 mb-sm-0"
                placeholder="Versión"
                ></b-form-input>
            </b-col>
            <b-col>
                <b-form-input
                id="inline-form-input-name"
                class="mb-2 mr-sm-2 mb-sm-0"
                placeholder="Año de publicación"
                ></b-form-input>
            </b-col>
        </b-row>
        <b-row class="mb-2">
             <b-col>
                <b-form-file
                    v-model="file1"
                    placeholder="Seleccione el PDF o arrastre..."
                    accept=".pdf"
                ></b-form-file>
            </b-col>
            
            <b-col>
                <b-form-file
                    v-model="file1"
                    placeholder="Seleccione la imagen o arrastre..."
                    accept=".png"
                ></b-form-file>
            </b-col>
        </b-row>
        <b-row class="mb-2">
           <b-col>
                <b-form-textarea
                id="textarea"
                v-model="text"
                placeholder="Descripción"
                rows="3"
                max-rows="6"
                ></b-form-textarea>
            </b-col>
        </b-row>

        <b-row class="mb-2">
            <b-col class="mb-5">
                <div style="margin-top: 2rem;">
                    <b-button block variant="success">Agregar</b-button>
                </div>
            </b-col>
        </b-row>
    </b-container>
</template>
<script>
export default {
    props: {
    nombreLibro: String,
    value: String
  },
    data() {
    return {
      isbn: "example asa12",
      titulo: "",
      categoria:"Categoria",
      autor:"",
      paginas:"",
      impresion:"",
      precio:"",
      version:"",
      descripcion:"",
      year:""

    };
  },
}
</script>
<style scoped>
b{
    text-align: left;
}
</style>