On gists

Composition API - examples

Vue.js

composition.vue Raw #

<template>
  <div>
    <h2 class="text-h4">{{ name }}</h2>
    <button @click="score++" class="btn">
      {{ score }} twice is {{ double }}
    </button>

    <hr />

    <button @click="score2++" class="btn">
      {{ score2 }} triple is {{ triple }}
    </button>

    <hr />
    <ul>
      <li v-for="data in dataList" :key="data.id">{{ data.name }}</li>
    </ul>

    <hr />

    <button v-if="!divVisible" @click="showDiv">Show div</button>
    <button v-if="divVisible" @click="hideDiv">Hide div</button>
    <div v-if="divVisible" class="bg-red-100">My super hidden div :)</div>

    <hr />
    <form @submit.prevent="submitForm">
      <input type="text" v-model="title" />
    </form>
  </div>
</template>

<script>
import { ref, computed, reactive, toRefs, onMounted } from 'vue'
import { data } from '@/frontapp/components/data.js'

export default {
  components: {},
  props: ['name'],

  // props, context nebo { emit } nebo { emit, slots }
  setup(props, { emit }) {
    console.log(props, 'our props')

    // data
    const score = ref(1)
    const dude = ref('Kcko')
    const dataList = ref(data)

    const state = reactive({
      score2: 12,
      triple: computed(() => state.score2 * 3),
      divVisible: false
    })

    // computed
    const double = computed(() => score.value * 2 + 7)
    const hello = computed(() => 'Hello, I am ' + dude.value)

    // methods
    const showDiv = () => {
      state.divVisible = true
    }
    const hideDiv = () => {
      state.divVisible = false
    }

    // v nadrazenem prvku / komponentne nebo  standardne -> view @new-list-coming="nejakaMetoda($event)"
    const title = ref('')
    const submitForm = () => {
      emit('new-list-coming', title.value)
    }

    onMounted(() => {
      console.log('Mounted yeah!')
    })

    return {
      score,
      double,
      hello,
      ...toRefs(state),
      dataList,
      showDiv,
      hideDiv,
      submitForm
    }
  }
}
</script>