لاگ کنسول مستقیما در تمپلیت Vue
گاهی وقت ها پیش میاد که میخوایم مقدار یک مدل یا حتی یک متن ساده رو وقتی که روی یک کامپوننت کلیک میشه توی کنسول چاپ کنیم، حتما تا الان مجبور بودین که یک متد بسازین و توی اون متد console.log رو استفاده کنید:
@click="test"ولی جالبه که بدونید میتونیم توی همون template هم به console.log و بقیه ی توابع جاوااسکریپتی دسترسی داشته باشیم. به مثال زیر توجه کنید:
<script setup>import { ref } from 'vue'const msg = ref('Hello World!')</script><template> <h1 style="cursor: pointer" @click="$el.ownerDocument.defaultView.console.log(msg)">{{ msg }}</h1> <input v-model="msg"></template>توی کد بالا یک h1 و یک input داریم. من گفتم که هر موقع روی h1 کلیک بشه مقدار مدل اینپوت رو توی کنسول چاپ کنه. توی امیت click هم کد زیر رو نوشتم که نیاز به توضیح خاصی نداره:
$el.ownerDocument.defaultView.console.log()پروژه رو میتونید از لینک زیر مستقیما ویرایش و اجرا کنید: