//MyForm.vue {{name}} Submit import {ref, onMounted} from 'vue' export default { setup () { const name = ref('') const submitForm = () =>{ console.log(`Form submmitted!

//MyForm.vue

} //-------------// //post-data.json

[ { "Name": "Setting Up your First Vue3 Project - Vue 3.0 Release", "Page": "https://learnvue.co/2020/09/setting-up-your-first-vue3-project-vue-3-0-release/" }, { "Name": "A Vue Event Handling Cheatsheet The Essentials", "Page": "https://learnvue.co/2020/01/a-vue-event-handling-cheatsheet-the-essentials/" }, { "Name": "6 Techniques to Write Better VueJS v-for Loops", "Page": "https://learnvue.co/2020/02/6-techniques-to-write-better-vuejs-v-for-loops/" }, { "Name": "A Simple Vue Watcher Tutorial For Beginners", "Page": "https://learnvue.co/2019/12/a-simple-vue-watcher-tutorial-for-beginners/" }, { "Name": "VueJS Animations for Beginners", "Page": "https://learnvue.co/2020/02/vuejs-animations-for-beginners/" }, { "Name": "Provide and Inject - An Introduction to Building Vue3 Plugins", "Page": "https://learnvue.co/2020/03/designing-vue3-plugins-using-provide-and-inject/" }, { "Name": "How to Manage VueJS Mixins", "Page": "https://learnvue.co/2019/12/how-to-manage-mixins-in-vuejs/" }, { "Name": "How You Can Use Vue Transitions Right Now", "Page": "https://learnvue.co/2020/01/how-you-can-use-vue-transitions-right-now/" }, { "Name": "Using Component Slots in VueJS An Overview", "Page": "https://learnvue.co/2019/12/using-component-slots-in-vuejs-an-overview/" }, { "Name": "An Overview of VueJS Dynamic Components", "Page": "https://learnvue.co/2020/01/an-overview-of-vuejs-dynamic-components/" }, { "Name": "Mastering Computed Properties in VueJS", "Page": "https://learnvue.co/2019/12/mastering-computed-properties-in-vuejs/" }, { "Name": "A First Look at Vue-Router in Vue3", "Page": "https://learnvue.co/2020/04/a-first-look-at-vue-router-in-vue3/" }, { "Name": "A Beginner's Guide to Vue Lifecycle Hooks", "Page": "https://learnvue.co/2019/12/a-beginners-guide-to-vuejs-lifecycle-hooks/" }, { "Name": "How to Use Lifecycle Hooks in Vue3", "Page": "https://learnvue.co/2020/03/how-to-use-lifecycle-hooks-in-vue3/" }, { "Name": "How to Add Drag and Drop to Your VueJS Project", "Page": "https://learnvue.co/2020/01/how-to-add-drag-and-drop-to-your-vuejs-project/" }, { "Name": "How to Make Your First VueJS Plugin", "Page": "https://learnvue.co/2020/01/how-to-make-your-first-vuejs-plugin/" }, { "Name": "An Introduction to Vue3 Props - A Beginner's Guide", "Page": "https://learnvue.co/2020/08/an-introduction-to-vue3-props-a-beginners-guide/" }, { "Name": "Building Reusable Components in VueJS | Tabs", "Page": "https://learnvue.co/2019/12/building-reusable-components-in-vuejs-tabs/" }, { "Name": "Creating a Vue3 Global Component", "Page": "https://learnvue.co/2020/08/how-to-register-a-vue3-global-component/" }, { "Name": "12 VueJS Best Practices for Pro Developers", "Page": "https://learnvue.co/2020/01/12-vuejs-best-practices-for-pro-developers/" }, { "Name": "An Overview of Vue Keep-Alive", "Page": "https://learnvue.co/2019/12/an-overview-of-vue-keep-alive/" }, { "Name": "A Beautiful Parallax Scrolling Effect in VueJS - Daily Vue Tips #2", "Page": "https://learnvue.co/2020/04/a-beautiful-parallax-scrolling-effect-in-vuejs-daily-vue-tips-2/" }, { "Name": "Getting Smart with Vue Form Validation Vuelidate Tutorial", "Page": "https://learnvue.co/2020/01/getting-smart-with-vue-form-validation-vuelidate-tutorial/" }, { "Name": "Build a Custom VueJS Tag Input in Under 10 Minutes", "Page": "https://learnvue.co/2020/01/build-a-custom-vuejs-tag-input-in-under-10-minutes/" }, { "Name": "LearnVue", "Page": "https://learnvue.co/" }, { "Name": "Building the Same Component in Vue2 vs. Vue3", "Page": "https://learnvue.co/2020/02/building-the-same-component-in-vue2-vs-vue3/" }, { "Name": "4 Vue3 Composition API Tips You Should Know", "Page": "https://learnvue.co/2020/01/4-vue3-composition-api-tips-you-should-know/" }, { "Name": "8 Free Vue Icon Libraries to Pretty Up Your Web App", "Page": "https://learnvue.co/2019/12/8-free-vue-icon-libraries-to-pretty-up-your-web-app/" }, { "Name": "How and Why to Use Wrapper Components in Vue3", "Page": "https://learnvue.co/2020/02/how-and-why-to-use-wrapper-components-in-vue3/" }, { "Name": "Animated Active Menu Highlights in VueJS - Daily Vue Tips #1", "Page": "https://learnvue.co/2020/04/animated-active-menu-highlights-in-vuejs-daily-vue-tips-1/" }, { "Name": "Extract and Reuse Logic in the Vue Composition API", "Page": "https://learnvue.co/2020/03/extract-and-reuse-logic-in-the-vue-composition-api/" }, ]

//---------------------// //SearchForm.vue

export default { setup() { const query = ref('') const reset = (evt) => { query.value = '' //clear the query }

return { query, reset } }, components: { SearchResult }, }

//---------------------------// //SearchResult.vue

export default ({ props : { query : String }, setup(props) { onMounted(() => { console.log('mounted') })

const filteredTitles = computed(() => { return titles.filter(s => s.Name.toLowerCase().includes(props.query.toLowerCase())) })

return { filteredTitles } }, })

//-----------// //Stylesheet for App.vue

Do it in vue.js

Instructions Please compress your SearchResult.vue before submission. According to the search form application, please make a link in each search'd result and when user clicks at the link, it will open a new tab following the page's url