javascript - Vue JS 上的两种方式数据绑定
问题描述
我在我的项目中使用 vue js 和 laravel。我面临一个问题，即 2 路数据绑定。让我解释一下场景。请检查屏幕截图。https://prnt.sc/n5qfi5
在此屏幕截图中，上下有 2 个部分。我创建了 2 个组件uppercomponent和lowercomponent。当用户在上部组件文本输入 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>
解决方案
推荐阅读
- javascript - if else条件如何将嵌套三元运算符拆分为正常
- windows - Windows 上 docker 的 vm.max_map_count 问题
- jenkins - 在 Jenkinsfile 中引用 curl 命令
- python - 如何将错误消息添加到 API 调用不和谐 python
- javascript - ReferenceError: targetsheetByName 未定义 // GoogleSheets 脚本
- react-native - 在 Telegram 上反应原生共享 base64 图像
- ipv6 - RFC 推荐的 C 中 IPv6 地址和 inet_ntop 的表示形式
- c++ - 不同变量类型的向量编译器错误
- swiftui - 为什么这个自定义形状会占据整个垂直空间？
- r - 合并 R 中的 df 并将列从 df 2 - 12 重命名为 df 1 的列名