@اوستینگیلآستین گیل
توسعه دهنده Full Stack JavaScript ، نویسنده Vuetensils and Particles CSS ، میزبان پادکست The Function Call.
من اخیراً نیاز داشتم هر زمان که محتوای آن تغییر کرد (شیار ، کودکان و غیره) ، وضعیت یک جز را به روز کنم. برای زمینه ، این یک م componentلفه فرم است که وضعیت اعتبار ورودی های آن را ردیابی می کند.
من فکر می کردم این مستقیم تر از آنچه هست باشد باشد و محتوای زیادی را در آنجا پیدا نکردم. بنابراین با داشتن راه حلی که از آن راضی هستم ، تصمیم گرفتم آن را به اشتراک بگذارم. بیا با هم بسازیمش 🙂
قطعه کد زیر با فرمت Options API نوشته شده است اما باید با Vue.js نسخه 2 و نسخه 3 کار کند ، مگر اینکه مشخص شده باشد.
راه اندازی
بیایید با فرمی شروع کنیم که وضعیت اعتبار آن را ردیابی کند ، یک کلاس را بر اساس حالت اصلاح کند و کودکان خود را به صورت
<template
<form :class="{ '--invalid': isInvalid }"
<slot /
form
template
<script
export default {
data: () = ({
isInvalid: false,
}),
};
scriptبرای به روزرسانی ویژگی isInvalid ، باید یک کنترل کننده رویداد را به برخی از رویدادها پیوست کنیم. ما می توانیم از رویداد “ارسال” استفاده کنیم ، اما من رویداد “ورودی” را ترجیح می دهم.
فرم یک رویداد “ورودی” را ایجاد نمی کند ، اما ما می توانیم از الگویی به نام “تفویض رویداد” استفاده کنیم. ما شنونده را به عنصر والدین پیوست خواهیم کرد (