Я использую vue js и laravel для своего проекта.Я столкнулся с одной проблемой, которая связана с двухсторонним связыванием данных.Позвольте мне объяснить сценарий.Пожалуйста, проверьте скриншот.https://prnt.sc/n5qfi5
На этом скриншоте 2 раздела сверху и снизу.Я создал 2 компонента верхний компонент и нижний компонент .Когда пользователь вводит текст в верхнем компоненте 1, то событие onchange отразится на текстовом вводе 1 нижнего компонента. Теперь на нижнем компоненте есть много строк на скриншоте, которые показывают 4 строки, Пользователь может добавить несколько строк.Поэтому, если пользователь добавит новую строку, то мы скопируем данные полей ввода последней строки и заполним поля ввода новой строки, после чего пользователь сможет изменить значения для ввода.
Если пользователь добавит 6 строк в нижний компонент и щелкнет по 2-й строке, то мы получим данные всех полей ввода из нижнего компонента 2-й строки и заполним поля ввода верхнего компонента.
Пожалуйста, проверьте мой код и помогите мне.
ВЕРХНИЙ КОМПОНЕНТ
**<template>
<div class="sign-lines column">
<ul>
<input type=hidden name='maxsign' id="maxsign" :value="maxsign" >
<input type=hidden name='currentsign' id="currentsign" :value="currentsign" >
<li v-for="index in localInputs" :key="index">
<div class="radio-btn">
<small>{{ $t('Line') }}{{index}}</small>
<label class="controls control--radio">
<div class="control__indicator"></div>
</label>
</div>
<div class="input-fld">
<div class="field">
<p class="control has-icons-right">
<input class="input" :id="'rows'+index" type="text" :value="index == '1' ? 'Text 1' : ''" v-on:keyup="RowChanged(index,$event.target.value);" v-on:blur="OnFocusRow(index,$event.target.value);" @focus="OnFocusRow(index,$event.target.value);" :maxlength="finalData.maxTextLimit" />
<span class="icon is-small is-right"> {{defaultFontSize}}</span>
</p>
</div>
</div>
<div class="input-btn">
<input type="hidden" name="fontsize1" value="5">
<a class="button is-danger" @click="DecrRow(index);"><i class="fa fa-minus" aria-hidden="true"></i></a>
<a class="button is-success" @click="IncrRow(index);"><i class="fa fa-plus" aria-hidden="true"></i></a>
<a class="button is-danger" @click="removeRow(index);" :class="index > '4' ? 'removeRow' : 'hideRemoveRow'">
<i class="fa fa-plus" aria-hidden="true"></i>
</a>
</div>
</li>
</ul>
<p v-show="seen" class="show-m" @click="addMore()">{{ $t('showMoreRows') }}</p>
</div>
</template>
<script>
import Button from '~/components/Button';
import { EventBus } from '../eventbus/event-bus.js';
export default {
name: 'middle-four-section',
components : {
Button
},
props: ['finalData'],
data(){
return {
currentsign:0,
maxsign:0,
localInputs:4,
seen:true,
defaultFontSize : 5,
hideSymbol:false,
defaultLineNumber:1,
activeInputForSymbol:1,
activeInputValueForSymbol:''
}
},
methods:{
OnRowsChanged(){
},
RowChanged(index,value){
var inputData = {};
inputData.index = index;
inputData.value = value;
inputData.lineNumber = this.defaultLineNumber;
this.activeInputForSymbol = index;
this.activeInputValueForSymbol = value;
EventBus.$emit('getInputTypeData',inputData);
},
OnFocusRow(index,value){
var inputData = {};
inputData.index = index;
inputData.value = value;
inputData.lineNumber = this.defaultLineNumber;
this.activeInputForSymbol = index;
this.activeInputValueForSymbol = value;
EventBus.$emit('getInputTypeData',inputData);
},
DecrRow(index){
var minVal = 3;
var maxVal = 50;
},
IncrRow(index){
},
addMore(clicked){
if(this.localInputs < 6){
this.localInputs +=1;
}
if(this.localInputs == 6){
this.seen = false;
}
},
removeRow(){
if(this.localInputs > 4){
this.localInputs -=1;
this.seen = true;
}
},
OnClickSymbol(){
this.hideSymbol = true;
},
closeSymbolPopUp(){
this.hideSymbol = false;
},
OnInsertSymbol(activeInput,symbol){
this.activeInputValueForSymbol = this.activeInputValueForSymbol+symbol;
console.log('this.activeInputValueForSymbol --------------- ',this.activeInputValueForSymbol);
//this.hideSymbol = false;
}
},
created(){
EventBus.$on('getLineIndex',lineInputData => {
this.defaultLineNumber = lineInputData.lineNumber;
console.log('getLineIndex',lineInputData);
//alert(lineInputData);
});
}
}
</script>
<style scoped>
.hideRemoveRow{display: none;}
#symboldiv{position: absolute; background-color: yellow; border: 1px solid black; width: 300px; height: 200px;z-index: 111;}
</style>**
НИЗКИЙ КОМПОНЕНТ
<template>
<div class="sign-btm signlist" id="signlist">
<div class="columns" v-for="index in inputs" :name="'signlistrow'+index" @click="getLineIndex(index)" :class="{clicked:clickedDiv == index}">
<div class="column is-0">
<div class="tb-sr">
<p>{{ $t('ID') }}</p>
<div class="input" :id="'signIndexBg_'+index"><span :id="'signIndexTxt_'+index">{{index}}</span></div>
</div>
</div>
<div class="column">
<div class="tb-sr">
<p>{{ $t('Line1') }}</p>
<input type="input" class="input" :id="'string1R'+index" v-on:keyup="OnListChange(1,$event.target.value);" autocomplete="off" value="Text 1" maxlength="250" size="36" v-model="finalData.text_1_[index]">
</div>
</div>
<div class="column">
<div class="tb-sr">
<p>{{ $t('Line2') }}</p>
<input type="input" class="input" :id="'string2R'+index" v-on:keyup="OnListChange(2,$event.target.value);" autocomplete="off" style="background-color: rgb(204, 204, 204);" maxlength="250" size="36" v-model="finalData.text_2_[index]">
</div>
</div>
<div class="column">
<div class="tb-sr">
<p>{{ $t('Line3') }}</p>
<input type="input" class="input" :id="'string3R'+index" v-on:keyup="OnListChange(3,$event.target.value);" autocomplete="off" style="background-color: rgb(204, 204, 204);" maxlength="250" size="36" v-model="finalData.text_3_[index]">
</div>
</div>
<div class="column">
<div class="tb-sr">
<p>{{ $t('Line4') }}</p>
<input type="input" class="input" :id="'string4R'+index" v-on:keyup="OnListChange(4,$event.target.value);" autocomplete="off" style="background-color: rgb(204, 204, 204);" maxlength="250" size="36" v-model="finalData.text_4_[index]">
<input type="hidden" :id="'string5R'+index" v-on:keyup="OnListChange(5,$event.target.value);" v-model="finalData.text_5_[index]">
<input type="hidden" :id="'string6R'+index" v-on:keyup="OnListChange(6,$event.target.value);" v-model="finalData.text_6_[index]">
</div>
</div>
</div>
<!-- End inputs add more div -->
<div class="input-btn">
<a class="button is-danger" @click="DeleteSign(1)"><i class="fa fa-times" aria-hidden="true"></i></a>
<a class="button is-success" @click="AddSign();setLocalSorage();"><i class="fa fa-plus" aria-hidden="true"></i></a>
</div>
</div>
</template>
<script>
import { EventBus } from '../eventbus/event-bus.js';
export default {
name: 'lower-full-section',
props: ['finalData'],
data(){
return {
inputs : 1,
clickedDiv:1,
defaultLines:1,
}
},
methods:{
OnListChange(inputTypeIndex,valueofInput){
var inputData = {};
inputData.index = inputTypeIndex;
inputData.value = valueofInput;
inputData.lineNumber = this.clickedDiv;
EventBus.$emit('getLineIndex',inputData);
},
AddSign(){
this.inputs +=1;
},
DeleteSign(){
if(this.inputs > 1){
this.inputs -=1;
} else {
alert('You can not delete all rows.');
}
},
setLocalSorage(){
},
getLineIndex(index){
this.clickedDiv = index;
}
},
created(){
EventBus.$on('getInputTypeData', lineInputData => {
console.log('lineInputData',lineInputData);
});
}
}
</script>
<style scoped>
.clicked{background: #FFFACD;}
</style>