Develop Reference

how to open add modal based on click event from Parent component- vuejs

There is a product page where product list component and action buttons are there. This is the parent component. That product list component consists of list table and edit/add modal. Now, problem is Add action event is in parent component. But, add modal related data is available in child component.
So, how can i open that model based on click event from parent? Here i am doing like this approach.
Parent Component(Product Component snippets )
<template>
..... other code ....
<div class="action-buttons">
<vu-button class="add-action" #click="onAddAction">
<svg-icon
fill="#0071E3"
name="add"
height="20"
width="28"
/>
</vu-button>
</div>
<ChildComponent :open-add-modal="isAddModal" />
</template>
Methods in Parent component
onAddAction() {
this.editable = false;
this.isAddModal = true;
},
Now, in child component i passing boolean props openAddModal but i am checking condition into created hook to show Add modal.
Problem is in initial rendering or page load add modal is showing up not in click event. How can i solve this issue?
Child component(Created hook)
created() {
if(this.openAddModal) {
this.showModal = true;
this.formType = 'add';
this.editId = null;
}
},
I want to show add modal based on click event from parent not in initial page load.

You can try using a watcher instead of checking the value of open-add-modal in the created hook. This way, when the prop open-add-modal in the child component changes, you can check the new value there and emit the needed data to the parent to then open the modal.
Example:
Parent component code
<template>
<div>
<p>Parent component</p>
<button #click="changeOpenAddModal">Clic to get child data</button>
<button #click="resetParent">Reset data in parent</button>
<p>Data from child: {{ childData }}</p>
<br />
<br />
<Child
:openAddModal="this.openAddModal"
#child-component-data-emit="this.setChildData"
/>
</div>
</template>
<script>
import Child from "./Child";
export default {
name: "Parent",
components: { Child },
data() {
return {
childData: null,
openAddModal: false,
};
},
methods: {
changeOpenAddModal() {
this.openAddModal = !this.openAddModal;
console.log(
"changing openAddModal data. New value is ",
this.openAddModal
);
},
setChildData(data) {
console.log("setting child data", data);
this.childData = data;
},
resetParent() {
this.childData = null;
this.changeOpenAddModal();
},
},
};
</script>
Child component code
<template>
<div>
<p>Child component</p>
</div>
</template>
<script>
export default {
name: "Child",
props: {
openAddModal: {
type: Boolean,
default: false,
},
},
data() {
return {
childData: {
prop1: "lorem",
prop2: "ipsum",
prop3: "dolor",
},
};
},
watch: {
openAddModal: function (newValue, oldValue) {
console.log("child watcher with newValue", newValue);
if (newValue) {
this.$emit("child-component-data-emit", this.childData);
}
},
},
mounted: function () {
console.log("prop openAddModal value on mounted:", this.openAddModal);
},
};
</script>

I have built a few modals with Vue 2 and Vue CLI, and use an alternate approach for showing, hiding, and determined if add or edit mode. No watch or separate add/edit mode boolean is necessary.
The 'product' processing is somewhat contrived since no database or AJAX are used in this example, but you should get be able to evaluate the functionality.
Parent.vue
<template>
<div class="parent">
<h4>Parent of Form Modal</h4>
<div class="row">
<div class="col-md-6">
<button class="btn btn-secondary" #click="showAddModal">Show Add Modal</button>
<button class="btn btn-secondary btn-edit" #click="showEditModal">Show Edit Modal</button>
</div>
</div>
<form-modal v-if="displayModal"
:parentProduct="product"
#save-product-event="saveProduct"
#close-modal-event="hideModal"
/>
</div>
</template>
<script>
import FormModal from './FormModal.vue'
export default {
components: {
FormModal
},
data() {
return {
product: {
id: 0,
name: '',
description: ''
},
displayModal: false
}
},
methods: {
showAddModal() {
this.resetProduct();
this.displayModal = true;
},
showEditModal() {
this.product.id = 1;
this.product.name = 'productEdit';
this.product.description = 'productEditDescription';
this.displayModal = true;
},
hideModal() {
this.displayModal = false;
},
saveProduct(modalProduct) {
this.product = modalProduct;
this.hideModal();
console.log(this.product);
},
resetProduct() {
this.product.id = 0;
this.product.name = '';
this.product.description = '';
}
}
}
</script>
<style scoped>
.btn-edit {
margin-left: 0.5rem;
}
</style>
FormModal.vue
<template>
<!-- The Modal -->
<div id="form-modal" class="modal-dialog-container">
<div class="modal-dialog-content">
<div class="modal-dialog-header">
<h4>{{ modalTitle }}</h4>
</div>
<div class="modal-dialog-body">
<form #submit.prevent="saveProduct">
<div class="form-group">
<label for="product-name">Name</label>
<input type="text" class="form-control" id="product-name" v-model="product.name">
</div>
<div class="form-group">
<label for="product-description">Description</label>
<input type="text" class="form-control" id="product-description" v-model="product.description">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-secondary btn-close" #click="closeModal">Cancel</button>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
parentProduct: {
type: Object,
required: true
}
},
data() {
return {
product: this.parentProduct
}
},
computed: {
modalTitle() {
return this.product.id === 0 ? 'Add Product' : 'Edit Product';
}
},
methods: {
closeModal() {
this.$emit('close-modal-event');
},
saveProduct() {
// Add product
if (this.product.id === 0) {
this.product.id = 2;
}
this.$emit('save-product-event', this.product);
}
}
}
</script>
<style scoped>
.modal-dialog-container {
/* display: none; Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.modal-dialog-content {
background-color: #fefefe;
margin: 10% auto;
padding: 20px;
border: 1px solid #888;
border-radius: 0.3rem;
width: 30%;
}
.btn-close {
margin-left: 0.5rem;
}
</style>

convert funcion global js to vuejs global, vue laravel

My function js just show color border required, and if input any place has something change color.
in javascript work good but in vue no work.
I need to use this function in vue. anyplace, any component of vue
app.js
$('.req' ).on('keyup', function() {
let val = this.value
val = $.trim(val)
if(val==""){
$(this).removeClass('valid');
}else{
$(this).addClass('valid');
}
});
$('.req').change(function() {
let val = this.value
val = $.trim(val)
if(val==""){
$(this).removeClass('valid');
}else{
$(this).addClass('valid');
}
})
Anyplace.blade.php
<form>
<input type="text" class="req form-control " name="last_name">
</form>
app.css
.valid{
border-left: 2px solid #9cff2b !important;
}
.req{
border-left: 2px solid red;
}
component-example.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">papa</div>
<div class="card-body">
papa. esto viene del hijo {{ messaje }}
<br>
<input type="text" v-model="modelo" class="req ">
</div>
</div>
<hijo :numero=modelo #verInfo="recibirpapa" > </hijo>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component papa.')
},
data(){
return{
modelo:"",
messaje:''
}
},methods:{
recibirpapa(valor){
this.messaje = valor;
}
},
}
</script>

You can try this code. include <req-input></req-input> anywhere you want.
Vue.component('req-input', {
template: '#req-input-template',
props: {
value: {
type: [String, Number],
default: ""
}
},
data: function() {
return {
currentValue: "",
valid: false
}
},
watch: {
value: {
handler(value) {
const string = value.trim()
if (string=="") {
this.valid = false
} else {
this.valid = true
}
this.currentValue = value
},
immediate: true
}
},
methods: {
handleInput() {
this.$emit("input", this.currentValue);
}
}
})
new Vue({
el: "#app",
data: {
modelo: ""
},
})
.valid {
border-left: 2px solid #9cff2b !important;
}
.req{
border-left: 2px solid red;
}
.form-control:focus {
outline: 0
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<req-input v-model="modelo"></req-input>
modelo: {{ modelo }}
<script type="text/x-template" id="req-input-template">
<input
type="text"
v-model="currentValue"
#input="handleInput"
:class="['form-control req', { 'valid': valid }]" />
</script>
</div>

How to highlight selected item with multiple lists to choose from in vue js

Im working with Vue js and I have multiple lists rendered but i only want to select(highlight) one element. At the moment multiple items are highlighted with each click. Hope that makes sense. Here is my code snipets below
<template>
<div>
<div class='list-group'>
<a v-for='(product, idx) in adslCapped' class='list-group-item'
v-on:click='toggleActiveIndex(idx)'
:class="{'active': idx == activeIndex}" >
{{product.name}}
</a>
</div>
<div class='list-group'>
<a v-for='(product, idx) in fibre' class='list-group-item'
v-on:click='toggleActiveIndex(idx)'
:class="{'active': idx == activeIndex}" >
{{product.name}}
</a>
</div>
</div>
</template>
data: {
activeIndex: null
},
methods: {
toggleActiveIndex: function(index){
this.activeIndex = index
}
}
So as you can see I have two lists, but when I click on the first item of the first list, then it highlights the first item in both lists. PLease note that these are only code snippets in relation to the issue i'm having.

With your current app structure, if you want only one item to be highlighted among all the lists, you can add another variable which represents the active list.
Then you need to change the condition for the active class and check if the index is the active index AND if the list is the active list.
HTML
<div id="app">
<div class='list-group'>
<a v-for='(product, idx) in adslCapped' class='list-group-item'
v-on:click='toggleActiveIndex(adslCapped, idx)'
:class="{'active': idx == activeIndex && adslCapped == activeList}" >
{{product}}
</a>
</div>
<div class='list-group'>
<a v-for='(product, idx) in fibre' class='list-group-item'
v-on:click='toggleActiveIndex(fibre, idx)'
:class="{'active': idx == activeIndex && fibre == activeList}" >
{{product}}
</a>
</div>
</div>
Script
new Vue({
el: "#app",
data() {
return {
activeIndex: null,
activeList: null,
adslCapped: ['a', 'b', 'c'],
fibre: ['1244', '125215', '02150']
}
},
methods: {
toggleActiveIndex: function(list,index){
this.activeIndex = index;
this.activeList = list;
}
},
})
Demo here
Hope it helps!

I know this is overkill for this simple case but you can abstract list into a component, store selected products separately.
Take a look at the example.
var productList = Vue.component('product-list', {
props: {
value: Object,
products: Array
},
template: `
<div class="product-list"><a class="ist-group-item" :class="{'active': product.id === value?.id}" #click="selectProduct(product)" :key="product.id" v-for="product in products">{{product.name}}</a></div>`,
methods: {
selectProduct(product) {
this.$emit('input', product)
}
}
})
var app = new Vue({
el: "#app",
data() {
return {
selected1: null,
selected2: null,
products: Array(5).fill(0).map((pr, id) => ({
id: id + 1,
name: `Product ${id + 1}`
}))
}
},
mounted() {
//console.log(this.products)
},
methods: {}
});
.product-list {
border: 1px solid black;
padding: 5px;
margin-top: 5px;
}
.ist-group-item {
display: block;
transition: all .3s ease-in;
}
.ist-group-item:hover {
background: lightgray;
}
.ist-group-item.active {
background: black;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<product-list v-model="selected1" :products="products">
</product-list>
<product-list v-model="selected2" :products="products">
</product-list>
</div>

The issue is that activeIndex is only one variable - which can't be reused for setting the index in the both lists.
The issue is that - you should be able to separate which list you want to activate when clicking within the v-for loop.
new Vue({
el: "#app",
data: {
list1: [{
name: "Learn JavaScript",
done: false
},
{
name: "Learn Vue",
done: false
},
{
name: "Play around in JSFiddle",
done: true
},
],
list2: [{
name: "Learn JavaScript",
done: false
},
{
name: "Learn Vue",
done: false
},
{
name: "Play around in JSFiddle",
done: true
},
],
active1Index: null,
active2Index: null
},
methods: {
toggleActive: function(list, index) {
if (list === "list1") {
this.active1Index = index
} else {
this.active2Index = index
}
}
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}
.active {
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class='list-group'>
<a v-for='(product, idx) in list1' class='list-group-item' v-on:click='toggleActive("list1", idx)' :class="{'active': idx == active1Index}">
{{product.name}}
</a>
</div>
<div class='list-group'>
<a v-for='(product, idx) in list2' class='list-group-item' v-on:click='toggleActive("list2", idx)' :class="{'active': idx == active2Index}">
{{product.name}}
</a>
</div>
</div>

Thanks everyone who answered you guys on stackoverflow are the best. Julia's solution is the one that worked for me.
I have to implement it throughout my whole app and lists now.
Thanks Julia

Vue How to Trigger Child Component on Submitting Form

This is my PhoneLineNumberComponent. It's running perfectly, but I want when a user clicks the button on parent component, the child component form will be loaded.
PhoneLineNumberComponent is my child component
and ButtonComponent is my parent component
<template>
<div>
<form v-for="(line,index) in lines" v-bind:key="index">
<div class="form-group">
<div class="col-lg-6">
<div class="row">
<div class="form-group">
<input v-model="line.number"
float-label="Phone Number"
numeric-keyboard-toggle
placeholder="5551234567"
type="text"
class="form-control"
value="" />
</div>
</div>
</div>
<button type="button" v-if="index + 1 === lines.length" #click="addLine">Add</button>
<button type="button" #click="removeLine(index)">Delete</button>
</div>
</form>
</div>
</template>
<script>
export default {
name: 'PhoneNumberLineComponent',
data() {
return {
lines:[],
blockRemoval: true,
index:[],
}
},
watch: {
lines() {
this.blockRemoval = this.lines.length <= 1
}
},
methods: {
addLine() {
let checkEmptyLines = this.lines.filter(line => line.number === null)
if (checkEmptyLines.length >= 1 && this.lines.length > 0) return
this.lines.push({
countryCode: null,
number: null,
})
},
removeLine(lineId) {
if (!this.blockRemoval) this.lines.splice(lineId, 1)
}
},
mounted() {
this.addLine()
}
}
</script>
<style scoped>
</style>
This is my ButtonComponent. I want when a user clicks the button on ButtonComponent child component PhoneLineNumber shall be triggered.
<template>
<div>
<PhoneNumberLineComponent></PhoneNumberLineComponent>
</div>
</template>
<script>
import PhoneNumberLineComponent from './PhoneNumberLineComponent';
export default {
name:'ButtonComponent',
components: {
PhoneNumberLineComponent
},
data() {
return {
lines: [],
blockRemoval: true,
index:[],
}
},
};
</script>
<style scoped>
</style>

You can set control clicked data like toggleShow with boolean type and use v-if for your component trigger
<template>
<div>
<PhoneNumberLineComponent v-if="toggleShow"></PhoneNumberLineComponent>
<button #click="toggleShow = !toggleShow">Button</button>
</div>
</template>
<script>
import PhoneNumberLineComponent from './PhoneNumberLineComponent';
export default {
name:'ButtonComponent',
components: {
PhoneNumberLineComponent
},
data() {
return {
lines: [],
blockRemoval: true,
index:[],
toggleShow: false
}
},
};
</script>

Why my array gets overlaped

I have a simple project where i am trying to learn the concepts of vue.js using componenetes, comunication between components(i use eventBus) i am using the webkit-simple template to approach this, basicly what happens, is that i have 1 component that consists in a simple textarea where i add some text, that text should be displayed in my second component, that is a template where i render a array with all my texts that i inserted, like a list of quotes.
component addQuote
<template>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-offset-3 col-md-6">
<label>Quote:</label>
<textarea v-model="quote.text" class="form-control" rows="5"></textarea>
<div class="text-center">
<button #click="addQuote" class="btn btn-primary center">Add Quote</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { quoteBus } from '../main.js';
export default {
methods: {
addQuote() {
if (this.counter < 10) {
this.counter++;
this.quote.key =+ new Date();
quoteBus.$emit('saveQuote', this.quote);
}
}
},
data: function () {
return {
quote: {},
counter: 0
}
},
created(){
quoteBus.$on('decreaseCounter', () => {
this.counter--
});
}
}
</script>
<style scoped>
.row {
margin-top: 40px;
}
.center {
margin: 0 auto;
}
div .text-center {
margin-top: 20px;
}
</style>
component quotes
<template>
<div class="row">
<div class="col-md-3" v-for="(quote,$index) in quotes" #click="deleteQuote($index)" :key="quote.key">
<div class="spacing">
<h2>{{quote.text}}</h2>
</div>
</div>
</div>
</template>
<script>
import { quoteBus } from '../main.js';
export default {
data: function () {
return {
quotes: []
}
},
methods: {
deleteQuote(i){
this.quotes.splice(i,1);
quoteBus.$emit('decreaseCounter');
}
},
created() {
quoteBus.$on('saveQuote', quote => {
this.quotes.unshift(quote);
console.log(JSON.stringify(this.quotes));
});
}
}
</script>
<style scoped>
h2 {
font-family: 'Niconne', cursive;
}
div .col-md-3 {
border: 1px solid darkgray;
padding: 10px;
}
div .row {
margin-top: 40px;
}
.spacing {
margin: 10px;
padding: 10px;
}
</style>
the problem is, everytime i add a quote the text replace all the elements before.
Example:
9th entry: text: "abcdef", all the entries in the array has this value in text, all my divs has the value of abcdef, what is happening :S

const quoteBus = new Vue();
Vue.component('addQuote', {
template: '#addQuote-template',
methods: {
addQuote() {
if (this.counter < 10) {
this.counter++;
this.quote.key = +new Date();
quoteBus.$emit('saveQuote', Object.assign({}, this.quote));
}
}
},
data: function() {
return {
quote: {},
counter: 0
}
},
created() {
quoteBus.$on('decreaseCounter', () => {
this.counter--
});
}
});
Vue.component('quotes', {
template: '#quotes-template',
data: function() {
return {
quotes: []
}
},
methods: {
deleteQuote(i) {
this.quotes.splice(i, 1);
quoteBus.$emit('decreaseCounter');
}
},
created() {
quoteBus.$on('saveQuote', quote => {
this.quotes.unshift(quote);
console.log(JSON.stringify(this.quotes));
});
}
});
new Vue({
el: '#app'
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<template id="addQuote-template">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-offset-3 col-md-6">
<label>Quote:</label>
<textarea v-model="quote.text" class="form-control" rows="5"></textarea>
<div class="text-center">
<button #click="addQuote" class="btn btn-primary center">Add Quote</button>
</div>
</div>
</div>
</div>
</div>
</template>
<template id="quotes-template">
<div class="row">
<div class="col-md-3" v-for="(quote,$index) in quotes" #click="deleteQuote($index)" :key="quote.key">
<div class="spacing">
<h2>{{quote.text}}</h2>
</div>
</div>
</div>
</template>
<div id="app">
<add-quote></add-quote>
<quotes></quotes>
</div>
The problem is that there is only one instance of this.quote in your addQuote component. You pass that particular object to quotes to be put into the array every time. When an object is put into an array, it is by-reference. If you put the same object into an array multiple times, you just have multiple references to the object's contents. Every element of your array is a reference to the same set of contents.
You need to send a copy of the object instead:
quoteBus.$emit('saveQuote', Object.assign({}, this.quote));