61 lines
1.4 KiB
Vue
61 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import Child from "@/components/TestUpgrade.vue";
|
|
import { ref, computed, watchEffect } from "vue";
|
|
|
|
const count = ref<number>(0);
|
|
const total = ref<number>(0);
|
|
const first = ref<string>("firstName");
|
|
const last = ref<string>("lastName");
|
|
|
|
const isEven = computed(() => count.value % 2 === 0);
|
|
|
|
// watchEffect(() => isEven.value && submit()); // logs true
|
|
|
|
const inputValue = ref<string>("");
|
|
function submit() {
|
|
console.log("test");
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<q-card class="q-pa-md">
|
|
<!-- Parent.vue -->
|
|
<div class="q-mb-md">
|
|
<div>Parent count is: {{ count }}</div>
|
|
<q-btn @click="count = 0">Reset count</q-btn>
|
|
</div>
|
|
|
|
<q-separator />
|
|
|
|
<div class="q-mb-md">
|
|
<Child
|
|
v-model="count"
|
|
v-model:total="total"
|
|
v-model:firstname.lastNameModifiers="first"
|
|
v-model:lastname.uppercase="last"
|
|
:name2="inputValue"
|
|
/>
|
|
</div>
|
|
|
|
<!-- <div class="q-mb-md">
|
|
<q-btn @click="refs.update">count ++</q-btn>
|
|
</div> -->
|
|
</q-card>
|
|
|
|
<q-separator />
|
|
|
|
<q-card class="q-pa-md">
|
|
<!-- Parent.vue -->
|
|
<div class="q-mb-md q-gutter-sm">
|
|
<div><h4>Test Vue</h4></div>
|
|
<div>
|
|
<q-input outlined dense type="text" v-model="inputValue"></q-input>
|
|
</div>
|
|
<q-btn @click="submit">submit</q-btn>
|
|
</div>
|
|
|
|
<!-- <div class="q-mb-md">
|
|
<Child :name="first" />
|
|
</div> -->
|
|
</q-card>
|
|
</template>
|