Disable/Enable input for each item from a loop VueJS - vue.js

I try to enable/disable each input from a loop. The problem is that my method it works just after refresh. After I modify something in code and save, then the input works.
<tr v-for="(item, index) in customer_names" :key="item.id">
<td>
<input :disabled="!item.disabled"
v-model="item.name"
type="text"
</td>
</tr>
<div class="edit_mode"
:class="{'display-none':!item.disabled}">
<i class="fa fa-save" #click="disableInput(index)" aria-hidden="true"></i>
</div>
<div class="edit_mode"
:class="{'display-none':item.disabled}">
<i class="fa fa-edit" #click="enableInput(index)" aria-hidden="true"></i>
</div>
props:['customer_names'],
data(){
return{
disabled: [],
}
}
enableInput(index){
console.log('enableInput',this.customer_names[index].disabled);
this.customer_names[index].disabled = false;
},
disableInput(index){
console.log('disabeInput',this.customer_names[index].disabled);
this.customer_names[index].disabled = true;
}

I didn't fully understand your problem. I deduced that you might want to enable or disable the text fields that you create from the data provided. If this is still not what you meant, correct your question by pasting more source code, and explain your problem in more detail.
Vue.component("custom", {
template: "#custom-template",
props: ["customer_names"],
methods: {
enableInput(item) {
item.disabled = false;
},
disableInput(item) {
item.disabled = true;
},
toggleInput(item) {
item.disabled = !item.disabled;
}
}
});
new Vue({
data() {
return {
items: [
{ name: "fus", disabled: false },
{ name: "ro", disabled: false },
{ name: "dah", disabled: true }
]
};
}
}).$mount("#app");
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<custom :customer_names="items" />
</div>
<script type="text/x-template" id="custom-template">
<table cellpadding=5>
<tr>
<th>Input</th>
<th>Version 1</th>
<th>Version 2</th>
</tr>
<tr v-for="item in customer_names" :key="item.id">
<td>
<input :disabled="item.disabled" v-model="item.name" type="text" />
</td>
<td>
<button #click="item.disabled = false">E</button>
<button #click="item.disabled = true">D</button>
<button #click="item.disabled = !item.disabled">T</button>
</td>
<td>
<button #click="enableInput(item)">E</button>
<button #click="disableInput(item)">D</button>
<button #click="toggleInput(item)">T</button>
</td>
</tr>
</table>
</script>

Related

Props passed to child component do not render well

I am attempting to pass user id's fetched from an API trough props from parent (App) to child (Modal). The problem is that when I pass the props down to the modal they don't render as they should in the div with the modal-body class, in fact all of them display an id of 1.
App.vue:
<template>
<div class="container mt-3">
<table class="table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody v-for="user in users" :key="user.id">
<tr>
<th scope="row">{{ user.id }}</th>
<td>{{ user.name }}</td>
<td>{{ user.username }}</td>
<td>
<Modal :id="user.id" />
</td>
</tr>
</tbody>
</table>
</div>
<pre>{{ user }}</pre>
</template>
<script>
import axios from "axios";
import Modal from "#/components/Modal.vue";
export default {
name: "App",
components: {
Modal,
},
data() {
return {
users: null,
};
},
methods: {
async load_users() {
try {
const { data } = await axios.get(
"https://jsonplaceholder.typicode.com/users"
);
this.users = data;
} catch (error) {
console.log("error");
}
},
},
mounted() {
this.load_users();
},
};
</script>
Modal.vue:
<template>
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-danger"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>
Delete
</button>
<!-- Modal -->
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
Are you sure you want to delete user: {{ id }}
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Modal",
props: ["id"],
};
</script>
The page preview is the following:
It does not matter on which Delete button I click the id is always 1.
But when I inspect the props in the Vue Devtools they are different, for the second for example it appears 2 as it should:
Any help is appreciated.
Thank you.
You are rendering 10 modals each with the same id - exampleModal, so it's always the first one which is opened. This is why you are experiencing the behaviour you describe.
However - the real problem is with your structure.
Why are you rendering 10 modals? Why not render one and pass in the respective props?
Something like this:
<template>
<Modal v-if="modal.isActive" :id="modal.userId" />
<tbody v-for="user in users" :key="user.id">
<tr>
<th scope="row">{{ user.id }}</th>
<td>{{ user.name }}</td>
<td>{{ user.username }}</td>
<td>
<button
type="button"
class="btn btn-danger"
#click="onClick(user.id)"
>
Delete
</button>
</td>
</tr>
</tbody>
</template>
<script>
import Modal from '#/components/Modal.vue'
export default {
name: 'App',
components: {
Modal,
},
data() {
return {
users: null,
modal: {
isActive: false,
userId: null,
},
}
},
methods: {
onClick(userId) {
Object.assign(this.modal, { isActive: true, userId })
},
},
}
</script>

Validating dynamic array in vuelidate

I am very new to vue and I am trying to validate an array using vuelidate which is used to render a dynamic table. The problem is with the validation() method as I can comprehend.
According to vuelidate docs, https://vuelidate.js.org/#sub-collections-validation, the $each method supports array. When I use it, the validation never fails. However, when I omit $each, and, try to validate first index of the array, it returns as corrected - validation fails.
To be more precise, I am trying to validate each added row(s), and if there's a problem with the validation, it'd add a class to the affected row.
Component App.vue,
This is the HTML code:
<template>
<div>
<br>
<div class="text-center">
<button type="button" class="btn btn-outline-primary" #click="addRow()">Shto</button>
</div>
<br>
<p
v-for="error of v$.$errors"
:key="error.$uid"
>
<strong>{{ error.$validator }}</strong>
<small> on property</small>
<strong>{{ error.$property }}</strong>
<small> says:</small>
<strong>{{ error.$message }}</strong>
</p>
<form name="articles" #submit.prevent="submitForm">
<table class="table table-hover table-responsive">
<thead class="thead-inverse">
<tr>
<th>Nr.</th>
<th class="col-3">Numri</th>
<th class="col-4">Përshkrimi</th>
<th class="col-1">Sasia</th>
<th class="col-1">Çmimi</th>
<th class="col-2">Shuma</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="(item, idx) in items_table" :key="item">
<td>
{{idx+1}}
</td>
<td>
<input v-model="item.part_no" name="part_no[]" class="form-control" type="text" />
</td>
<td>
<textarea v-model="item.part_name" name="part_name[]" class="form-control" type="text"></textarea>
</td>
<td>
<input v-model="item.part_qty" name="part_qty[]" class="form-control " type="number" step="0.01">
</td>
<td>
<input v-model="item.part_price" name="part_price[]" class="form-control" type="number" step="0.01">
</td>
<td>
<input :value="item.part_total" name="part_total[]" class="form-control text-center border-0" style="background-color: transparent; font-size: 18 px;" type="text" disabled>
</td>
<td>
<button type="button" #click="deleteRow(idx)" class="btn btn-danger btn-md btn-block">X</button>
</td>
</tr>
</tbody>
</table>
<div class="text-center">
<button type="submit" name="" id="" class="btn btn-primary btn-lg btn-block">Valido</button>
</div>
</form>
<div class="text-center">
<textarea name="" id="verbose_log" cols="70" rows="15" refs="logg"></textarea>
</div>
</div>
</template>
This is the content from script tag:
<script>
import useVuelidate from '#vuelidate/core'
import { required } from '#vuelidate/validators'
export default {
name: 'App',
setup: () => ({ v$: useVuelidate() }),
validation() {
return {
items_table: {
$each: {
part_no: {
required,
}
}
},
}
},
data() {
return {
items_table: [
{
part_no: '', part_name: '', part_qty: '', part_price: '', part_total: ''
}
],
items_subtotal: 0.00,
items_total: 0.00,
}
},
methods: {
deleteRow(index) {
if(this.items_table.length == 1) {
this.items_table.splice(index, 1);
this.items_subtotal = 0.00;
this.items_total = 0.00;
this.addRow();
} else if(this.items_table.length > 0) {
this.items_table.splice(index, 1);
}
},
addRow() {
this.items_table.push({part_no: '', part_name: '', part_qty: '', part_price: '', part_total: ''});
},
submitForm() {
this.v$.$touch();
//if (this.v$.$error) return;
console.log(this.v$);
document.getElementById('verbose_log').innerHTML = JSON.stringify(this.$data, null, 4);
}
},
computed: {
//
}
}
</script>
For the sake of clarity, I have excluded two methods which calculate line total and the total itself.

On click check all checkbox in vue js

I Need to check all dynamic checkbox with vue js anytime user will click button.
Eg: Click on and all checkbox will be selected/deselected
var Records = Vue.component('Records', {
template : `
<button v-on:click="selectAll()" class="btn btn-outline-primary">Select All</button>
<table class="table table-striped table-hover">
<template v-for="(col_name, key) in form_object_keys">
<tr>
<th scope="col"></th>
<th scope="col" v-for="(col, key) in col_name">{{ col }}</th>
</tr>
</template>
<template v-for="(ps, index) in form_object">
<tr>
<td>
<div class="form-check">
<input type="checkbox" :value="form_id" />
</div>
</td>
<td v-for="dato in ps">{{ dato }}</td>
</tr>
</template>
</table>
`,
data() {
return{
title: 'Component Title',
form_id: 10,
form_object: ['item1', 'item2', 'item3'],
form_object_keys: ['key1', 'key2', 'key3'],
selectAll(){
//
}
}
}
});
I've created "selectAll" function which will be engaged by click button
I would keep the selected state in the reactive data as well, and bind the checkbox with v-model: Check this
<script setup>
import { ref } from 'vue'
const form_objects = ref([
{name: "item1", selected: false},
{name: "item2", selected: false},
{name: "item3", selected: true},
{name: "item4", selected: false},
]);
const selectAll = () => {
form_objects.value.forEach((item) => {item.selected = true})
}
</script>
<template>
<button v-on:click="selectAll()">Select All</button>
<div v-for="item in form_objects">
{{item.name}}
<input type="checkbox" v-model="item.selected" />
</div>
</template>

Vue.js modal window not opening on click from another component

I'm new to Vue.js and struggling to understand how to open a modal window on click.
Basically when I call the modal from another component I want to open the modal itself and show the data I'm passing to it from an API call. The problem is that that the modal still not shown with an inline "display:none". I'm going crazy why I cannot make it "display:block" even if I'm setting to true the prop I'm passing to the modal.
Can anyone look at the code and advise something? I'm out of resources :/
Modal component below:
<template>
<div id="modal" class="modal fade show" v-show="modalVisible" aria-labelledby="myModalLabel">
<div class="container">
<img :src="movieDetails.Poster" />
<div class="copy">
<p>
<span>Title:</span>
{{ movieDetails.Title }}
</p>
<p>
<span>Year:</span>
{{ movieDetails.Released }}
</p>
<p>
<span>Genre:</span>
{{ movieDetails.Genre }}
</p>
<p>
<span>Director:</span>
{{ movieDetails.Director }}
</p>
<p>
<span>Actors:</span>
{{ movieDetails.Actors }}
</p>
<p>
<span>Plot:</span>
{{ movieDetails.Plot }}
</p>
<p>
<span>IMDB Rating:</span>
{{ movieDetails.imdbRating }}
</p>
</div>
<button class="btn btn-light" #click="$emit('close')">Close</button>
</div>
</div>
</template>
<script>
export default {
name: "Modal",
props: ["movieDetails", "modalVisible"]
};
</script>
Component I'm calling the modal from:
<template>
<div class="container">
<h3>Movies database</h3>
<div class="input-group w-50 mx-auto">
<input
class="form-control"
id="input-search"
type="text"
v-model="textSearch"
placeholder="Search movie by title"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-primary" v-on:click="searchMovie">Go!</button>
</span>
</div>
<div class="list-results" v-if="resultsFeed && resultsFeed.length">
<table class="table table-hover text-left">
<thead class="thead-light">
<tr>
<th scope="col">Title</th>
<th scope="col">Year</th>
<th scope="col">Poster</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr v-for="result in resultsFeed" v-bind:key="result.imdbID" :data-id="result.imdbID">
<td>{{ result.Title }}</td>
<td>{{ result.Year }}</td>
<td>
<img alt="movie poster" :src="result.Poster" />
</td>
<td class="text-right">
<button class="btn btn-secondary" #click="moreMovieInfo(result)">Show info</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="list-message" v-else>No results!</div>
<modal v-if="modalVisible" #close="modalVisible = false" :movieDetails="extraInfoFeed" />
</div>
</template>
<script>
import axios from "axios";
import modal from "./Modal.vue";
export default {
name: "Search",
components: {
modal
},
data() {
return {
resultsFeed: [],
extraInfoFeed: [],
textSearch: "",
modalVisible: false,
modalData: null
};
},
methods: {
searchMovie() {
var that = this;
axios
.get(
`https://www.omdbapi.com/?s=${encodeURIComponent(
this.textSearch
)}&apikey=a56adf1b`
)
.then(function(response) {
that.resultsFeed = response.data.Search;
})
.catch(function(error) {
console.log(error);
});
},
moreMovieInfo: function(result) {
var that = this;
axios
.get(
`https://www.omdbapi.com/?i=${encodeURIComponent(
result.imdbID
)}&apikey=a56adf1b`
)
.then(function(response) {
that.extraInfoFeed = response.data;
that.modalVisible = true;
// document.getElementById("modal").style.display = "block";
})
.catch(function(error) {
console.log(error);
});
// this.modalData = result;
}
}
};
</script>
<modal v-if="modalVisible" #close="modalVisible = false" :movieDetails="extraInfoFeed" />
So you are using v-if here and your Model component is expecting modalVisible as a prop to work. So, even when modalVisible is true, v-if will allow Modal component to be created, but its internal v-show will hide it as its modalVisible prop is null.
This should work:
<modal :modal-visible="modalVisible" #close="modalVisible = false" :movieDetails="extraInfoFeed" />

How to call method from another component VUE

I have one component
<template>
<div class="section">
<a v-if='type == "events"' class="button is-primary" #click="showForm()">
<i class="fa fa-calendar"></i> &nbsp<span class="card-stats-key"> Add Event</span>
</a>
<a v-if='type == "places"' class="button is-primary" #click="showForm()">
<i class="fa fa-location-arrow"></i> &nbsp<span class="card-stats-key"> Add Place</span>
</a>
<table class="table" v-if="!add">
<thead>
<tr>
<th>
<abbr title="Position"># Client Number</abbr>
</th>
<th>Title</th>
<th>
<abbr title="Played">Status</abbr>
</th>
<th>
<abbr title="Played">View</abbr>
</th>
</tr>
</thead>
<tbody>
<tr v-for="event in events">
<th>{{event.client_number}}</th>
<td v-if='type == "events" '>{{event.title}}</td>
<td v-if='type == "places" '>{{event.name}}</td>
<td>
<p class="is-danger">Waiting</p>
</td>
<td> View </td>
</tr>
</tbody>
</table>
<add v-if="add" v-on:hideAdd="hideFrom()"></add>
</div>
</template>
<script>
import Add from '../forms/AddPlace.vue'
export default {
name: 'Tabbox',
data() {
return {
events: [],
add: ''
}
},
props: ['type'],
created() {
let jwt = localStorage.getItem('id_token')
var ref = wilddog.sync().ref('users').child(jwt).child(this.type);
ref.once("value")
.then((snapshot) => {
this.events = snapshot.val();
}).catch((err) => {
console.error(err);
})
},
methods: {
showForm(add) {
if (this.add == true)
this.add = false;
else {
this.add = true;
}
},
hideFrom() {
this.add = false
console.log('This add is false');
}
},
components: {
Add
}
}
</script>
and another component
<template>
<div class="field is-horizontal">
<div class="field-label">
<!-- Left empty for spacing -->
</div>
<div class="field-body">
<div class="field">
<div class="control">
<button class="button is-primary" v-bind:class="{ 'is-loading': loading } " #click="addPlace()">
Add place
</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
add: false
}
},
methods: {
addPlace() {
this.$emit('hideAdd', this.add)
},
},
}
</script>
How i can calling method from showForm() from first first component in second one! I'm trying to that with $emit function, it doesn't work. And trying with $broadcast, same. How i can use event there?
Add a ref attribute to the child component in the parent component's template like this:
<add v-if="add" v-on:hideAdd="hideFrom()" ref="add-component"></add>
Now your parent component will have access to the child component's VueComponent instance and methods, which you can access like this:
methods: {
showForm() {
this.$refs['add-component'].addPlace();
}
}
Here's documentation on refs.