text ejemplo de vue

Posted 2021-04-29

pagina HTML ____________________

<template>
  <b-container class="p-5">
    <div v-if="isLogged">

      <ProductList :products="products"/>

      <button @click="logout">{{cta}}</button>

      <input type="text" v-model="newProduct">

      <button @click="addProduct">Add product</button>
    </div>
    <span :class="{'is-danger': showdanger}" v-else>no estás logado</span>
    <span v-if="worstCase">Terrible para {{fullName}}</span>
  </b-container>
</template>

<script>
import ProductList from "@/components/ProductList";

export default {
  components: {
    ProductList
  },
  data() {
    return {
      cta: "Logout",
      isLogged: true,
      products: ['Pulsera', 'Anillo'],
      showdanger: true, // This comes from backend,
      firstName: "Hello",
      lastName: "World",
      newProduct: undefined
    };
  },
  computed: {
    worstCase() {
      return !this.isLogged && this.showdanger && this.products.length === 0;
    },
    fullName() {
      return `${this.firstName} con apellido ${this.lastName}`; //this.firstName + " " + this.lastName
    }
  },
  methods: {
    logout() {
      this.isLogged = false;
    },
    addProduct() {
      this.products.push(this.newProduct);
    }
  }
};
</script>

<style scoped>
.is-danger {
  background-color: red;
}
</style>
________________________________________________
Product list

<template>
  <div>
    <Product v-for="currentProduct in products" :key="currentProduct" :product="currentProduct"/>

    <div>This is the product list</div>
  </div>
</template>

<script>
import Product from "@/components/Product";

export default {
  components: {
    Product
  },
  props: {
    products: Array
  }
};
</script>

<style>
</style>
________________________________________________________________

product
<template>
  <div>
    <span>{{product}}</span>
  </div>
</template>

<script>
export default {
  props: {
    product: String
  }
};
</script>

<style>
span {
    background-color: rgb(53, 62, 65)
}
</style>