36 lines
881 B
Vue
36 lines
881 B
Vue
<!-- Child.vue -->
|
|
<script setup lang="ts">
|
|
import { ref, watchEffect } from "vue";
|
|
|
|
const model = defineModel({ type: Number, required: true });
|
|
const total = defineModel("total", { type: Number, required: true });
|
|
|
|
const name = defineModel("firstname", { type: String, required: true });
|
|
const last = defineModel<string>("lastname", {});
|
|
|
|
// const [firstname, firstNameModifiers] = defineModel("firstName");
|
|
// const [lastName, lastNameModifiers] = defineModel("lastName", {
|
|
// type: String,
|
|
// required: true,
|
|
// });
|
|
|
|
watchEffect(() =>
|
|
model.value === 3 ? console.log("yes") : console.log("not")
|
|
); // logs true
|
|
|
|
function update() {
|
|
model.value++;
|
|
}
|
|
defineProps<{ name2: String }>();
|
|
</script>
|
|
|
|
<template>
|
|
<div>Child model is: {{ model }}</div>
|
|
{{ total }}
|
|
<q-btn @click="update">Add +</q-btn>
|
|
|
|
<q-separator />
|
|
{{ name }} {{ last }}
|
|
|
|
{{ name2 }}
|
|
</template>
|