Portfolio starter theme for Gridsome and Forestry

https://vuejsexamples.com/portfolio-starter-theme-for-gridsome-and-forestry/
Portfolio starter theme for Gridsome and Forestry

How to create dynamic input using Vue

https://dev.to/snehalk/how-to-create-dynamic-input-using-vue-2hf7
Hello Readers,
In this blog, I am going to show you, how we can create dynamic input using vuejs.
First, create a component and name it as DynamicInput.vue and add the below code.



<template>
<div class="hello">
<h1>{{ msg }}</h1>
<div class="w-full mt-4 p-10">
<button
type="button"
class="flex justify-start ml-2 rounded-md border px-3 py-2 bg-pink-600 text-white"
@click="addMore()"
>
Add More
</button>
<div v-for="(course, index) in courses" :key="index">
<div class="flex justify-start ml-2 mt-4">
<input
v-model="course.courseName"
class="w-full py-2 border border-indigo-500 rounded"
/>
<button
type="button"
class="ml-2 rounded-md border px-3 py-2 bg-red-600 text-white"
@click="remove(index)"
v-show="index != 0"
>
Remove
</button>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
courses: [
{
courseName: "",
},
],
};
},
methods: {
addMore() {
this.courses.push({
courseName: "",
});
},
remove(index) {
this.courses.splice(index, 1);
},
},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>


Now add this component into App.vue file as below.



<template>
<div id="app">
<DynamicInput msg="Example of Dynamic Input" />
</div>
</template>

<script>
import DynamicInput from "./components/DynamicInput";
export default {
name: "App",
components: {
DynamicInput,
},
};
</script>

<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>


I have installed tailwind CSS to styling you have to install it.
If you like my post please follow me to get more blog posts.


.ltag__user__id__672647 .follow-action-button {
background-color: #9f0b46 !important;
color: #ffffff !important;
border-color: #9f0b46 !important;
}








Snehal Follow


Software Developer by Profession, mostly works in Laravel | Vue JS | Nuxt JS | PHP | Javascript | InertiaJS.



For more details you can refer below codesandbox.



Happy Reading. 🦄 ❤️

Tracing Squares to Detect
Hand Stability

https://ranashreyas.medium.com/tracing-squares-to-detect-hand-stability-e36faf70ca12?source=rss------vuejs-5
15th August, 2021Continue reading on Medium »

Plugins in Vue JS | How to create your own.

https://medium.com/@toakshay.official/plugins-in-vue-js-how-to-create-your-own-88f900b62f6d?source=rss------vuejs-5
So before starting let me tell you what plugins are in Vue JS and how can you benefit with them.Continue reading on Medium »

How to Add Chatbot in Vue.js Apps

https://medium.com/js-dojo/how-to-add-chatbot-in-vue-js-apps-d446e2111cbe?source=rss------vuejs-5
In this post, we will be learning how to add chatbot in Vue.js apps. Vue.js is an open-source JavaScript framework for building user…Continue reading on Vue.js Developers »

VSCode:How to Clone the vue-upload-drop-image from Github and Run it

https://paulxiong.medium.com/vscode-how-to-clone-the-vue-upload-drop-image-from-github-and-run-it-3bf61d0b9b4e?source=rss------vuejs-5
https://github.com/paulxiong/vue-upload-drop-images.gitContinue reading on Medium »

Options Api vs. Composition Api pada Vue.js

https://fhaladin-dev.medium.com/options-api-vs-composition-api-pada-vue-js-7df4dc8e9918?source=rss------vuejs-5
Composition api merupakan salah satu fitur baru yang hadir di vue.js 3 sebagai alternatif dari options api, composition api ini sendiri…Continue reading on Medium »

Build an Online Shop with Vue And Laravel Part 8.2 - Implement Vuex

https://alfianardhidev.medium.com/build-an-online-shop-with-vue-and-laravel-part-8-2-implement-vuex-dd71b9ff52a4?source=rss------vuejs-5
ImageContinue reading on Medium »

Stop cross contamination in your Vue component — Part III

https://medium.com/@shashikantwagh721/stop-cross-contamination-in-your-vue-component-part-iii-17909e841a9?source=rss------vuejs-5
If you haven’t read Part I and Part II, I strongly recommend to check it out, so you will have context for this post.Continue reading on Medium »

Calculator Challenge With Vuejs And Tailwind CSS

https://vuejsexamples.com/calculator-challenge-with-vuejs-and-tailwind-css/
Calculator Challenge With Vuejs And Tailwind CSS

URL shortener using GitHub Pages and Firebase

https://vuejsexamples.com/url-shortener-using-github-pages-and-firebase/
URL shortener using GitHub Pages and Firebase

Bookflix - A place to manage, explore and review books

https://vuejsexamples.com/bookflix-a-place-to-manage-explore-and-review-books/
Bookflix - A place to manage, explore and review books

Word/Random Number Generator Built Using Vue.js

https://vuejsexamples.com/word-random-number-generator-built-using-vue-js/
Word/Random Number Generator Built Using Vue.js

Appetiser Apps Coding Challenge

https://vuejsexamples.com/appetiser-apps-coding-challenge/
Appetiser Apps Coding Challenge

Multiple Authentication Using Laravel-Jetstream With Inertia-Vue

https://vuejsexamples.com/multiple-authentication-using-laravel-jetstream-with-inertia-vue/
Multiple Authentication Using Laravel-Jetstream With Inertia-Vue