VueJS reusable component not updated data for second component - vue.js

I am trying to create one component in VueJS and need to reuse that component.
below is code for me.
Vue.component("radio" , {
props: ['selectGender'],
data: function() {
return{
selected: 1
}
},
template : `
<div class="modal fade" :id="compId" style="background: rgb(0, 0, 0, 0.8);">
<div class="modal-dialog default-font" style="top: 30%;">
<div class="modal-content center">
<div class="modal-header base-bg center">
<div class="center">
<span class="validationHeadSpan">Select Gender</span><br/>
</div>
<button type="button" class="close modal-close" data-dismiss="modal" style="font-size:3rem">×</button>
</div>
<div class="modal-body t-left" id="printArea">
<div class="container">
<div class="row" style="padding: 0rem 1rem;">
<div class="col">
<div class="custom-control custom-radio" style="margin: 1rem 0rem;">
<input class="custom-control-input" type="radio" id="rdbMale" value="0" checked v-model="selected"/>
<label class="custom-control-label" for="rdbMale">
<div class="addr_header_1" style="margin-top: 0.8rem;">Male</div>
</label>
</div>
</div>
<div class="col">
<div class="custom-control custom-radio" style="margin: 1rem 0rem;">
<input class="custom-control-input" type="radio" id="rdbFemale" value="0" checked v-model="selected"/>
<label class="custom-control-label" for="rdbFemale">
<div class="addr_header_1" style="margin-top: 0.8rem;">Female</div>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer center">
<button type="button" class="button" data-dismiss="modal" v-on:click="selectGender(selected)"><span class="validationButtonContent">Select</span></button>
</div>
</div>
</div>
</div>
`,
mounted : function(){
},
methods : {
}
});
Here is my another component from where i am opening reusable component.
Vue.component("Component1" , {
data: function() {
return{
selected: 1
}
},
template : `
<div>
<radio ref="returnOpenFirst" :selectGender="selectGenderFirst"></radio>
<radio ref="returnOpenSecond" :selectGender="selectGenderSecond"></radio>
</div>
<div class="btn btn-primary formButton" v-on:click="openFirst">
<span>Open First</span>
</div>
<div class="btn btn-primary formButton" v-on:click="openSecond">
<span>Open First</span>
</div>
`,
mounted : function(){
},
methods : {
openFirst:function(){
jQuery(self.$refs.returnOpenFirst.$el).modal({
'backdrop' : false
}).modal('show');
},
openSecond:function(){
jQuery(self.$refs.returnOpenSecond.$el).modal({
'backdrop' : false
}).modal('show');
},
selectGenderFirst:function(gender){
console.log("First Gender", gender);
},
selectGenderSecond:function(gender){
console.log("Second Gender", gender);
},
}
});
While opening second component, data property is updated of first component only not for second component.
Any help is highly appreciated.
Thanks in advance.

Here i found solution.
Vue.component("radio" , {
props: ['selectGender','type'],
data: function() {
return{
selected: 1
}
},
template : `
<div class="modal fade" :id="compId" style="background: rgb(0, 0, 0, 0.8);">
<div class="modal-dialog default-font" style="top: 30%;">
<div class="modal-content center">
<div class="modal-header base-bg center">
<div class="center">
<span class="validationHeadSpan">Select Gender</span><br/>
</div>
<button type="button" class="close modal-close" data-dismiss="modal" style="font-size:3rem">×</button>
</div>
<div class="modal-body t-left" id="printArea">
<div class="container">
<div class="row" style="padding: 0rem 1rem;">
<div class="col">
<div class="custom-control custom-radio" style="margin: 1rem 0rem;">
<input class="custom-control-input" type="radio" :id="'rdbMale'+type" value="0" checked v-model="selected"/>
<label class="custom-control-label" :for="'rdbMale'+type">
<div class="addr_header_1" style="margin-top: 0.8rem;">Male</div>
</label>
</div>
</div>
<div class="col">
<div class="custom-control custom-radio" style="margin: 1rem 0rem;">
<input class="custom-control-input" type="radio" :id="'rdbFemale'+type" value="0" checked v-model="selected"/>
<label class="custom-control-label" :for="'rdbFemale'+type">
<div class="addr_header_1" style="margin-top: 0.8rem;">Female</div>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer center">
<button type="button" class="button" data-dismiss="modal" v-on:click="selectGender(selected)"><span class="validationButtonContent">Select</span></button>
</div>
</div>
</div>
</div>
`,
mounted : function(){
},
methods : {
}
});
Issue with same id created by VueJs, we need to pass one dynamic property and with the use of that we need to create id for radio.
Thank you guys.

Related

laravel 9 vue 3 edit multiple checked checkbox value

when editing a checkbox array, I cannot select (checked) that are in the database
how to select those that exist in the checkbox database (checked) ?
please, help
Edit.vue
<template>
<div>
<admin-layout>
<template #header>
<div class="row">
<div class="col-md-12">
<h4>Емделуші</h4>
</div>
</div>
</template>
<div class="row">
<div class="col-md-12 mb-3">
<div class="card">
<div class="card-header">
<span><i class="bi bi-table me-2"></i></span> Емделушіні өзгерту
<div class="card-header-pills float-end">
<inertia-link :href="route('admin.schedules.index')" class="btn btn-primary text-white text-uppercase" style="letter-spacing: 0.1em;">
Кері қайту
</inertia-link>
</div>
</div>
<form #submit.prevent="updateSchedule">
<div class="card-body">
<div class="mb-3">
<label for="name" class="form-label">Аты-жөні</label>
<input type="text" class="form-control" id="name" v-model="form.name" :class="{'is-invalid' : form.errors.name }" autofocus="autofocus" autocomplete="off">
</div>
<div class="invalid-feedback mb-3" :class="{ 'd-block' : form.errors.name }">
{{ form.errors.name }}
</div>
<div class="mb-3">
<label class="form-label" for="email">Email</label>
<input type="text" class="form-control" id="email" v-model="form.email" :class="{'is-invalid' : form.errors.email }" autofocus="autofocus" autocomplete="off">
</div>
<div class="invalid-feedback mb-3" :class="{ 'd-block' : form.errors.email }">
{{ form.errors.email }}
</div>
<div class="mb-3">
<label class="form-label" for="phone">Телефон</label>
<input type="text" class="form-control" id="phone" v-model="form.phone" :class="{'is-invalid' : form.errors.phone }" autofocus="autofocus" autocomplete="off">
</div>
<div class="invalid-feedback mb-3" :class="{ 'd-block' : form.errors.phone }">
{{ form.errors.phone }}
</div>
<div class="form-check form-check-inline" v-for="(time, index) in times" :key="index">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" :value="time.time" v-model="form.times" :class="{'is-invalid' : form.errors.times }">
<label class="form-check-label" for="inlineCheckbox1">{{ time.time }}</label>
</div>
<div class="invalid-feedback mb-3" :class="{ 'd-block' : form.errors.times }">
{{ form.errors.times }}
</div>
</div>
<div class="card-footer clearfix">
<div class="float-end">
<jet-button class="ms-4 btn-primary text-white" :class="{ 'text-white-50': form.processing }" :disabled="form.processing">
<div v-show="form.processing" class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Өзгертілуде...</span>
</div>
Өзгерту
</jet-button>
</div>
</div>
</form>
</div>
</div>
</div>
</admin-layout>
</div>
</template>
<script>
import AdminLayout from '#/Layouts/AdminLayout';
import JetButton from '#/Jetstream/Button.vue'
import { useForm } from '#inertiajs/inertia-vue3';
import InertiaLink from "#inertiajs/inertia-vue3/src/link";
export default {
name: "Edit",
components: {
AdminLayout,
JetButton,
InertiaLink,
},
props: {
appointment: {},
times: {},
},
setup (props) {
const form = useForm({
name: props.appointment.name,
email: props.appointment.email,
phone: props.appointment.phone,
times: props.times,
});
return {
form,
}
},
methods: {
},
}
}
</script>
when editing a checkbox array, I cannot select (checked) that are in the database how to select those that exist in the checkbox database (checked) ? please, help

Uncaught TypeError: _ctx. is not a function [VueJS 3]

I have problems when I put all my buttons inside one component and use click event to trigger the modals, I can put single button to single component and use event click with created custom components but I am questioning is there any way to put all buttons inside a components and that still works.
Buttons.vue
<template>
<button
class="btn btn-link btn-info btn-icon btn-sm"
data-toggle="modal" data-target="#userInfoModal"
#click="getUserInfo(user)">
<i class="icon-alert-circle-exc"></i>
</button>
<button
class="btn btn-link btn-warning btn-icon btn-sm"
data-toggle="modal" data-target="#userEditModal"
#click="getUserInfo(user)">
<i class="icon-pencil"></i>
</button>
<button
class="btn btn-link btn-danger btn-icon btn-sm"
data-toggle="modal" data-target="#userRemoveModal"
#click="getUserInfo(user)">
<i class="icon-simple-remove"></i>
</button>
</template>
usersManage.vue
<template>
<div class="col-md-12">
<div class="card">
<div class="card-header d-flex flex-row">
<h4 class="card-title align-self-center">Users Manager</h4>
<button class="btn btn-success btn-fab btn-icon btn-round mb-3 ml-2"
data-toggle="modal" data-target="#addUserModal">
<i class="icon-add"></i>
</button>
</div>
<div class="card-body">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Username</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, id) in users" :key="user.id">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.username }}</td>
<td class="text-right">
<!--- BUTTON COMPONENT HERE --->
<Buttons />
<!--- END BUTTON COMPONENT --->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- MODALS -->
<!-- ADD USER MODAL -->
<div
class="modal modal-black fade" id="addUserModal"
tabindex="-1" role="dialog" aria-labelledby="addUserModal" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="addUserModal">Add new user</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="tim-icons icon-simple-remove"></i>
</button>
</div>
<form class="form-horizontal">
<div class="modal-body">
<div class="d-flex flex-row">
<label class="col-md-4 col-form-label">Name</label>
<div class="col-md-6">
<div class="form-group">
<input
type="name"
name="name"
class="form-control"
v-model="newUser.name"
/>
</div>
</div>
</div>
<div class="d-flex flex-row">
<label class="col-md-4 col-form-label">Username</label>
<div class="col-md-6">
<div class="form-group">
<input type="username" name="username" class="form-control"
v-model="newUser.username" />
</div>
</div>
</div>
<div class="d-flex flex-row">
<label class="col-md-4 col-form-label">Email</label>
<div class="col-md-6">
<div class="form-group">
<input type="email" name="email" class="form-control"
v-model="newUser.email" />
</div>
</div>
</div>
<div class="d-flex flex-row">
<label class="col-md-4 col-form-label">Password</label>
<div class="col-md-6">
<div class="form-group">
<input type="password" name="password" class="form-control"
v-model="newUser.password" />
</div>
</div>
</div>
<div class="d-flex flex-row">
<label class="col-md-4 col-form-label">Confirm Password</label>
<div class="col-md-6">
<div class="form-group">
<input type="password" name="confirmPassword" class="form-control"
v-model="newUser.confirmPassword" />
</div>
</div>
</div>
<div class="d-flex flex-row">
<label class="col-md-4 col-form-label">Roles</label>
<div class="col-md-6">
<div class="form-group">
<input type="roles" name="roles" class="form-control"
v-model="newUser.roles" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Cancel
</button>
<button type="submit" class="btn btn-primary" #click.stop.prevent="addUser()">
Create user
</button>
</div>
</form>
</div>
</div>
</div>
<!-- END ADD USER MODAL -->
<!-- USER's INFO MODAL -->
<div class="modal modal-black fade" id="userInfoModal"
tabindex="-1" role="dialog" aria-labelledby="userInfoModal" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="userInfoModal">
<strong class="text-primary">
{{ userInfo.username }} - {{ userInfo.name }}
</strong>'s Basic Information
</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="tim-icons icon-simple-remove"></i>
</button>
</div>
<div class="modal-body" id="userInfo">
<div class="row">
<div class="col-6">
<p>ID: {{ userInfo.id }}</p>
<p>Phone: {{ userInfo.phone }}</p>
<p>Username: {{ userInfo.username }}</p>
</div>
<div class="col-6">
<p>Name: {{ userInfo.name }}</p>
<p>Email: {{ userInfo.email }}</p>
</div>
</div>
</div>
<div class="modal-footer d-flex flex-row-reverse">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<!-- END USER's INFO MODAL -->
<!-- EDIT USER MODAL -->
<div class="modal modal-black fade" id="userEditModal"
tabindex="-1" role="dialog" aria-labelledby="userEditModal" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="userEditModal">
Edit user
<strong class="text-primary">
{{ userInfo.name }} - {{ userInfo.username }}
</strong>
</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="tim-icons icon-simple-remove"></i>
</button>
</div>
<form class="form-horizontal" method="PUT">
<div class="modal-body">
<div class="d-flex flex-row">
<label class="col-md-3 col-form-label">Username</label>
<div class="col-md-9">
<div class="form-group">
<input type="text" class="form-control" name="username"
v-model="userInfo.username" />
</div>
</div>
</div>
<div class="d-flex flex-row">
<label class="col-md-3 col-form-label">Name</label>
<div class="col-md-9">
<div class="form-group">
<input type="text" class="form-control" name="username"
v-model="userInfo.name" />
</div>
</div>
</div>
<div class="d-flex flex-row">
<label class="col-md-3 col-form-label">Email</label>
<div class="col-md-9">
<div class="form-group">
<input type="email" name="email" class="form-control"
v-model="userInfo.email" />
</div>
</div>
</div>
<div class="d-flex flex-row">
<label class="col-md-3 col-form-label">Roles</label>
<div class="col-md-9">
<div class="form-group">
<input type="roles" name="roles" class="form-control"
v-model="userInfo.roles" />
</div>
</div>
</div>
</div>
<div class="modal-footer d-flex flex-row">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
<button type="submit" class="btn btn-primary" data-dismiss="modal"
#click="updateUser()">
Save Changes
</button>
</div>
</form>
</div>
</div>
</div>
<!-- END EDIT USER MODAL -->
<!-- REMOVE USER MODAL -->
<div class="modal modal-black fade" id="userRemoveModal"
tabindex="-1" role="dialog" aria-labelledby="userRemoveModal" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="userRemoveModal">
Confirm delete user
<strong class="text-primary">
{{ userInfo.username }} - {{ userInfo.name }}
</strong>?
</h4>
<button
type="button"
class="close"
data-dismiss="modal"
aria-hidden="true"
>
<i class="tim-icons icon-simple-remove"></i>
</button>
</div>
<div class="modal-body h4 text-white text-center mt-4">
Delete user
<strong class="text-danger">
{{ userInfo.username }} - {{ userInfo.name }}
</strong>
?
</div>
<div class="modal-footer d-flex flex-row">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Cancel
</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"
#click="removeUser()">
Delete User
</button>
</div>
</div>
</div>
</div>
<!-- END REMOVE USER MODAL -->
<!-- END MODALS -->
</template>
<script>
import axios from "axios";
import InfoButton from ".../components/cores/Buttons.vue";
const API_URL = "http://localhost:8000/api";
export default {
name: "manageUsers",
components: { InfoButton },
data() {
return {
users: [],
newUser: {
name: null,
username: null,
email: null,
password: null,
confirmPassword: null,
roles: null,
},
userInfo: {
id: 0,
name: "",
username: "",
phone: "",
email: "",
password: "",
},
};
},
methods: {
refreshUsers() {
axios.get(`${API_URL}/users/allusers`).then((res) => {
this.users = res.data.data;
});
},
addUser() {
axios
.post(`${API_URL}/users/create`, this.newUser)
.then((res) => {})
.catch((error) => {
console.log("ERRRR:: ", error.response.data);
});
this.$router.push("/manager/users");
},
getUserInfo(user) {
axios
.get(`${API_URL}/users/show/` + user.id)
.then((res) => {
this.userInfo.id = res.data.data.id;
this.userInfo.name = res.data.data.name;
this.userInfo.email = res.data.data.email;
this.userInfo.username = res.data.data.username;
this.userInfo.phone = res.data.data.phone;
})
.catch((error) => {
console.log("ERRRR:: ", error.response.data);
});
},
updateUser() {
axios
.put(`${API_URL}/users/update/${this.userInfo.id}`, {
name: this.userInfo.name,
username: this.userInfo.username,
email: this.userInfo.email,
password: null,
roles: this.userInfo.roles,
})
.then((res) => {
this.refreshUsers();
})
.catch((error) => {
console.log("ERRRR:: ", error.response.data);
});
},
removeUser() {
axios
.delete(`${API_URL}/users/delete/${this.userInfo.id}`)
.then((res) => {
this.refreshUsers();
})
.catch((error) => {
console.log("ERRRR:: ", error.response.data);
});
},
},
mounted() {
this.refreshUsers();
},
};
</script>
I had the same problem and the solution was to send each button to a different function

How can you make dynamically generated buttons in Vue.js 3 not executing the same function

I'm creating an application where input flexibility is of paramount. My application generates contents dynamically (input, textarea, buttons). this picture shows the bottom section separated from the top with a borderline was generated dynamically
What I want to do is, when I click the grey plus button, it should generate an additional director's name, and director's address fields for a PARTICULAR SECTION (separated by a grey line). Unfortunately, my application keeps adding (and removing) director's name, and director's address fields for all sections instead of the section where the grey button (or red button is clicked) see here. Can that be achieved in Vue.js PLEASE? I.m using the 'add_new_director_field()' function in my Vue.js code to add the aforementioned fields. Thanks in Advance good people. See my code below:
<script>
import NavBar from './VettingReportMenu.vue';
import BreadCrumb from './BCRPreviousDirectors.vue';
import SideLinkPreviousDirectors from './SideLinkPreviousDirectors.vue';
export default {
data() {
return{
header_1: "Previous Directors",
count: 0,
disabled: true,
checked: false,
isActive: true,
inputs: [{
director: "",
}],
sec: []
}
},
components:{
NavBar, BreadCrumb, SideLinkPreviousDirectors
},
setup(){
let myClass = "LeftLine";
let counts = 1;
return myClass, counts;
},
methods:{
add_new_director_field(){
this.inputs.push(this.inputs.length+1);
},
remove_director_field(index){
this.inputs.splice(index, 1)
},
add_new_section(){
this.count++;
this.isActive = false;
this.sec.push({
director: ''
});
},
remove_section(index){
this.count--;
if(this.count == 0)
this.isActive = true;
this.sec.splice(index, 1)
},
trythis: function() {
alert(this.counts);
},
}
}
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
<template>
<div class="row">
<div class="col-sm-12">
<NavBar />
<BreadCrumb />
<br />
</div>
</div>
<!-- This is the main div splitting the page into two (2) -->
<div class="row">
<div class = "col-sm-1"><!-- Left Space Section-->
</div>
<div class = "col-sm-8"><!-- Main Content Section -->
<h2 style="border-bottom: 1px solid #DDDDDD">{{header_1}}</h2>
<br />
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-sm-6">
<div class="chiller_cb form-check-inline align-items-center">
<input id="addDirectorsHistory" type="checkbox" name="prev_dir_checkbox" value="Add Previous Directors" v-model="checked">
<label for="addDirectorsHistory"><strong>Check this box to fill this part, or click 'Save and Continue' to skip.</strong></label>
<span></span>
</div>
</div>
<div class="col-sm-3">
</div>
</div>
<br />
<!-- Here starts the section containing the previous directors -->
<div v-if="checked"> <!-- Wrapper -->
<!-- Buttons for Adding and Removing Previous Director's Section -->
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-4">
<div class="form-group">
<div class="input-group">
<button #click.self="add_new_section()" class="btn shadow-sm btn-secondary btn-block rounded-2" id="add_pds" data-toggle="tooltip" data-placement="top" title="Remove Address Field">
<i class="fas fa-plus-square" style="horizontal-align: left;"></i>
Previous Director's Section
</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<div class="input-group">
<button :disabled="isActive" #click="remove_section(count)" class="btn shadow-sm btn-danger btn-block rounded-2" id="remove_pds" data-toggle="tooltip" data-placement="top" title="Remove Address Field">
<i class="fas fa-minus-square" style="horizontal-align: left;"></i>
Previous Director's Section
</button>
</div>
</div>
</div>
<div class="col-sm-2">
</div>
</div>
<!-- Buttons for Adding and Removing Previous Director's Section -->
<br />
<div v-for="(secs,k) in sec" :key="k" style="border-bottom:1px solid #b7b7b7">
<br />
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12 align-middle">
<strong>Heading for Previous Directors' Entry:</strong><b class="text-danger">*</b>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-heading" style="color: #8FBC8F"></i>
</span>
</div>
<input placeholder="Heading for Previous Directors Entry" class="form-control" :name="'prev_dir_heading_' + k" required >
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-sm-12 align-middle">
<strong>Appointed By Resolution Dated:</strong><b class="text-danger">*</b>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="far fa-calendar-alt" style="color: #8FBC8F"></i>
</span>
</div>
<input type="date" class="form-control" placeholder="e.g. 2018" name="resolution_date" required >
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-sm-12 align-middle">
<strong>Presented for Filing Dated:</strong><b class="text-danger">*</b>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="far fa-calendar-alt" style="color: #8FBC8F"></i>
</span>
</div>
<input type="date" class="form-control" name="filing_date" required >
</div>
</div>
</div>
</div>
</div>
</div>
<!-- The listing of Directors -->
<div :id="'c'+k+d" v-for="(input,d) in inputs" :key="k+d">
<div class="row" >
<div class="col-sm-1">
<strong>{{d+1}}.</strong>
</div>
<div class="col-sm-11">
<div class="row">
<div class="col-sm-12 align-middle">
<strong>Director's Name:</strong><b class="text-danger">*</b>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-user-tie" style="color: #8FBC8F"></i>
</span>
</div>
<input v-model="input[d]" class="form-control" placeholder="e.g. Hassan Dele Ekene" :name="'current_director_' + k + '_' + d" required >
</div>
</div>
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="input-group">
<button :v-model="'remove_btn' + k + '' + d" #click="remove_director_field(k + d)" type="button" v-show="d || ( !d && inputs.length > 1)" class="btn shadow-sm btn-danger btn-block rounded-2" data-toggle="tooltip" data-placement="top" title="Remove Address Field">
<i class="fas fa-minus-square" style="horizontal-align: left;"></i>
</button>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="input-group">
<button :id="'add_btn' + k + '' + d" :v-model="'add_btn' + k + '' + d" v-show="d == inputs.length-1" #click="add_new_director_field()" type="button" class="btn shadow-sm btn-secondary btn-block rounded-2" data-toggle="tooltip" data-placement="top" title="Add New Address Field">
<i class="fas fa-plus-square" style="horizontal-align: left;"></i>
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 align-middle">
<strong>Director's Address:</strong><b class="text-danger">*</b>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-map-marked-alt" style="color: #8FBC8F; margin-top: -30px"></i>
</span>
</div>
<textarea class="form-control _textarea" :name="'dir_addr_' + k + '_' + d"
maxlength="1000" placeholder="Director's Address" rows="2" required></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
</div>
</div>
<!-- End of listing -->
<!-- Here ends the section containing the current directors -->
<br />
<div class="row">
<div class="col-sm-3">
<div class="col-sm-12">
<div class="form-group">
<div class="input-group">
<button type="submit" class="btn shadow-sm btn-success btn-block rounded-0" id="btn_submit">
<i class="fas fa-angle-double-left" style="horizontal-align: left;"></i>
Back to Share Capital
</button>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
</div>
<div class="col-sm-3">
<div class="col-sm-12">
<div class="form-group">
<div class="input-group">
<button type="submit" class="btn shadow-sm btn-success btn-block rounded-0" id="btn_submit">
<i class="far fa-save"></i>
Save and Continue
<i class="fas fa-angle-double-right" style="horizontal-align: right;"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "col-sm-3" ><!-- SideLink Section-->
<div class="row myClass">
<SideLinkPreviousDirectors />
</div>
</div>
</div>
<br />
<br />
</template>
You have no pointer in your add_new_director_field method in what section inputs should be added. It's very hard to understand from your code whats happening at all. I'd recommend to start from designing a data structure at first, then go to markup. Very quick and simplified draft how can it be:
const inputsGroup = [
{
type: 'text',
value: 'Name',
},
{
type: 'text',
value: 'Address',
},
]
data() {
return {
sections: [
{
inputs: [inputsGroup]
},
]
}
}
...
addSection() {
this.sections.push({ inputs: defaultInputs })
}
removeSection(index) {
this.sections.splice(index, 1)
}
addInputs(sectionIndex) {
this.sections[sectionIndex].inputs.push(inputsGroup)
}
deleteInputs(index, sectionIndex) {
this.sections[sectionIndex].inputs.splice(index, 1)
}
<template>
<button
#click="addSection"
>
Add section
</button>
<div v-for=(section, sectionIndex) in sections>
<div v-for="(inputGroup, inputGroupIndex) in section.inputs">
<input
v-for="input in inputGroup"
:value="input.value"
:type="input.type"
>
<button
#click="deleteInputs(inputGroupIndex, sectionIndex)"
>
Delete inputs
</button>
</div>
<button
#click="addInputs(sectionIndex)"
>
Add inputs
</button>
<button
#click="deleteSection(sectionIndex)"
>
Delete section
</button>
</div>
</template>

Dynamically add items from input with show vuejs

there was a point where I got stuck while trying to make invoice transactions with vue js, I can add a new item, it works fine, the problem starts here, when I want to show the "description" and "discount_value" that I have hidden, it adds it to all lines, not like this, whichever index button is clicked. add his item. Thank you in advance for your help.
const app = new Vue({
el: '#app',
data: {
addAciklama: false,
addIndirim: false,
faturasections: [
{
name: "",
unit_price: 0,
net_total: 0,
description: '',
discount_value: '',
}
],
},
methods: {
addNewFaturaSatiri() {
this.faturasections.push({
name: "",
unit_price: 0,
net_total: 0,
description: '',
discount_value: '',
});
},
removeFaturaSatiri(faturasectionIndex) {
this.faturasections.splice(faturasectionIndex, 1);
},
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
<section>
<div class="card-body border-bottom-light" v-for="(fatura, faturasectionIndex) in faturasections" :key="faturasectionIndex">
<div class="row">
<div class="col-sm-4 col-12 mb-1 mb-sm-0 hizmet">
<div class="form-floating">
<input type="text" class="form-control" v-model="fatura.name" placeholder=" "/>
<label>HİZMET / ÜRÜN</label>
</div>
</div>
<div class="col-sm-2 col-12 mb-1 mb-sm-0 brfiyati">
<div class="form-floating">
<input type="number" class="form-control" v-model.number="fatura.unit_price" placeholder=" "/>
<label>BR.FİYAT</label>
</div>
</div>
<div class="col-sm-1 col-12 mb-1 mb-sm-0 toplam">
<div class="form-floating">
<input type="text" class="form-control" v-model="fatura.net_total" placeholder=" "/>
<label>TOPLAM</label>
</div>
</div>
<div class="col-sm-1 col-12 mb-1 mb-sm-0">
<div class="mb-1">
<div class="mb-1">
<button v-if="!addAciklama" #click="addAciklama = !addAciklama" class="dropdown-item">description</button>
<button v-if="!addIndirim" #click="addIndirim = !addIndirim" class="dropdown-item">discount_value</button>
</div>
</div>
<button class="btn btn-icon btn-secondary" #click="removeFaturaSatiri(faturasectionIndex)">DELETE</button>
</div>
</div>
<div id="aciklamalar" class="row mt-1">
<div class="col-12 d-flex">
<div class="col-sm-6 fatura-aciklama">
<div class="row" v-if="addAciklama">
<div class="f-a">
<div class="input-group">
<span class="input-group-text kdv">AÇIKLAMA</span>
<input type="text" class="form-control" v-model="fatura.description"/>
</div>
</div>
<div class="f-b">
<button class="btn btn-icon btn-outline-secondary" #click="addAciklama = !addAciklama">DELETE</button>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="d-flex flex-column">
<div class="row row mb-1" v-if="addIndirim">
<div class="i-i">
<div class="input-group">
<span class="input-group-text kdv">İNDİRİM</span>
<input type="text" class="form-control" v-model="fatura.discount_value"/>
</div>
</div>
<div class="i-s">
<button class="btn btn-icon btn-outline-secondary" #click="addIndirim = !addIndirim">DELETE</button>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-2">
<button type="button" class="btn btn-outline-secondary btn-sm"
data-repeater-create #click="addNewFaturaSatiri()">
<span class="align-middle">NEW INVOICE</span>
</button>
</div>
</div>
</div>
</section>
</div>
addAciklama and addIndirim are global variable which is defined in data property and it's obvious that if you change them, it applies to every iteration of your v-for block and not apply for each index separately.
In order to fix this, you can move addAciklama and addIndirim into each object in faturasections:
faturasections: [{
name: "",
unit_price: 0,
net_total: 0,
description: '',
discount_value: '',
addIndirim: false,
addAciklama: false,
}],
Then in your template section code, you should replace all addIndirim and addAciklama to fatura.addIndirim and fatura.addAciklama. this will fix your issue.

VUEJS: Model not changing in for loop

The V-model:"question.answer" is the same for each loop.
The content of rating_questions is:
rating_question = [
{
"id":1,
"question":"How did you like this?",
"amount_of_stars":8,
"answer":0
},
{
"id":2,
"question":"Second question?",
"amount_of_stars":3,
"answer":0
}]
When I select an answer for the first question, the answer is saved in rating_question[0].answer but if I select an answer for the second question, it is also saved in rating_question[0].answer and not in rating_questions[1].answer as I would expect.
<template>
<div class="ratings">
<div class="rating" v-for="(question, index) in rating_questions">
<div class="question">
{{ question.question }}
</div>
<div class="answer">
<div class="rating-stars">
<span v-for="i in question.amount_of_stars">
<input :id="i" name="rating" v-model="question.answer" type="radio" :value="i" class="radio-btn hide" />
<label :for="i" >☆</label>
</span>
{{ rating_questions[index]['answer'] }}
{{index}}
<div class="clear"></div>
</div>
</div>
</div>
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" id="btn-chat" #click="sendRating">
Send
</button>
</span>
</div>
</template>
<script>
export default {
props: ['user', 'event', 'rating_questions'],
methods: {
sendRating() {
this.$emit('ratingsent', {
rating_questions: this.rating_questions
});
}
}
}
</script>
Your problem is not in Vue usage but how you use <input> and <label> HTML elements...
<input> id and <label> for attributes are assigned with simple number
1..question.amount_of_stars...which means first combo for every question will have id = 1, second 2 etc. Moreover you are using same name for every combo!
Now if you click on the label (star) in second question, browser just switch active combo on 1st question.
Try this:
<input :id="`rating-${question.id}-${i}`" :name="`rating-${question.id}`" v-model="question.answer" type="radio" :value="i" class="radio-btn hide" />
<label :for="`rating-${question.id}-${i}`" >☆</label>
Now:
every combo in the group (single question) will have same name (OK!)
every combo (and it's corresponding label) will have different id (OK!)
Also it's usually better to use :key together with v-for
new Vue({
data() {
return {
rating_questions: [
{
"id":1,
"question":"How did you like this?",
"amount_of_stars":8,
"answer":0
},
{
"id":2,
"question":"Second question?",
"amount_of_stars":3,
"answer":0
}]
}
}
}).$mount("#app")
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="ratings">
<div class="rating" v-for="(question, index) in rating_questions" :key="question.id">
<div class="question">
{{ question.question }}
</div>
<div class="answer">
<div class="rating-stars">
<span v-for="i in question.amount_of_stars">
<input :id="`rating-${question.id}-${i}`" :name="`rating-${question.id}`" v-model="question.answer" type="radio" :value="i" class="radio-btn hide" />
<label :for="`rating-${question.id}-${i}`" >☆</label>
</span>
{{ question.answer }}
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
The error was in my input id's...
Each new question had the same id's.
<template>
<div class="ratings">
<div class="rating" v-for="(question, index) in rating_questions">
<div class="question">
{{ question.question }}
</div>
<div class="answer">
<div class="rating-stars">
<span v-for="i in question.amount_of_stars">
<input :id="'rating' + index + i" name="rating" v-model="question.answer" type="radio" :value="i" class="radio-btn hide" />
<label :for="'rating' + index + i" >☆</label>
</span>
<div class="clear"></div>
</div>
</div>
</div>
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" id="btn-chat" #click="sendRating">
Send
</button>
</span>
</div>
</template>
<script>
export default {
props: ['user', 'event', 'rating_questions'],
methods: {
sendRating() {
this.$emit('ratingsent', {
rating_questions: this.rating_questions
});
}
}
}
</script>
There is very trivial fix of this problem.
See you are modifying the props. In vuejs, props are not supposed to be updated. I hope you might have encountered some error in the console (not sure though, as sometimes in my case also it doesn't appear)
Please use this SFC file
<template>
<div class="ratings">
<!-- using the data variable rather than props -->
<div class="rating" v-for="(question, index) in questions" :key="index">
<div class="question">
{{ question.question }}
</div>
<div class="answer">
<div class="rating-stars">
<span v-for="i in question.amount_of_stars" :key="i">
<input
:id="i"
name="rating"
v-model="question.answer"
type="radio"
:value="i"
class="radio-btn hide"
/>
<label :for="i">☆</label>
</span>
{{ questions[index]["answer"] }}
{{ index }}
<div class="clear"></div>
</div>
</div>
</div>
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" id="btn-chat" #click="sendRating">
Send
</button>
</span>
</div>
</template>
<script>
export default {
props: ["user", "event", "rating_questions"],
data() {
return {
questions: this.rating_questions, // because you can not change props in vuejs
};
},
methods: {
sendRating() {
this.$emit("ratingsent", {
rating_questions: this.questions,
});
},
},
};
</script>