#vue.js #laravel-8
Вопрос:
Я создаю приложение, в котором гибкость ввода имеет первостепенное значение. Мое приложение динамически генерирует содержимое (ввод, текстовая область, кнопки). на этом рисунке показано, что нижняя секция, отделенная от верхней границей, была сгенерирована динамически
Что я хочу сделать, так это, когда я нажимаю серую кнопку «Плюс», она должна генерировать дополнительное имя директора и поля адреса директора для ОПРЕДЕЛЕННОГО РАЗДЕЛА (разделенные серой линией). К сожалению, мое приложение продолжает добавлять (и удалять) имя директора и поля адреса директора для всех разделов вместо раздела, в котором нажата серая кнопка (или красная кнопка), см. Здесь. Может ли это быть достигнуто в Vue.js ПОЖАЛУЙСТА? Я использую функцию » add_new_director_field()» в моем Vue.js код для добавления вышеупомянутых полей. Заранее спасибо добрым людям. Смотрите мой код ниже:
<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 amp;amp; 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> Комментарии:
1. Почему вы вводите число в свой
inputsмассив вadd_new_director_fieldметоде? Должно ли это быть вместо этого что-то вродеthis.inputs.push({ director: 'My new director' });?2. @Kuzzy Спасибо за твой ответ, Куззи. Причина этого заключалась в том, что я думал, что это позволит различать кнопки «Добавить» и «Удалить», чтобы они не делали одно и то же для разных разделов одновременно. Оказывается, это никак не влияет на мой код. Ваше предложение похоже на то, что я делал, и это не решило проблему. Тем не менее, спасибо, парень, что протянул руку помощи.
Ответ №1:
В вашем add_new_director_field методе нет указателя на то, в какой раздел следует добавлять входные данные. Из вашего кода очень трудно понять, что вообще происходит. Я бы рекомендовал сначала начать с разработки структуры данных, а затем перейти к разметке. Очень быстрый и упрощенный проект, как это может быть:
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>
Комментарии:
1. Огромное спасибо за ваш ответ. Однако defaultInputs выдает ошибку при попытке использования функции addSection() в вашем решении. Остальные 3 функции работают нормально. Мне нужно получить от вас некоторые разъяснения по поводу того, что такое defaultInputs, чтобы отметить ваш ответ как ответ. Большое спасибо, чувак
2. Я нашел способ обойти загвоздку. Я просто заменяю «defaultInputs» на » inputs: [2]», и он отлично работает. Большое спасибо @Kuzzy. Клянусь, ты только что заработал мой месяц