У меня есть микро меню, при нажатии на 5-тый кнопку(там картинка) , открывается меню замены цены, допустим я хочу поменять цену для первого товара, я нажимаю на 5 кнопочку, ввожу новую цену и нажимаю на зеленый блок у меня не меняется цена первой строки , а просто создает новый элемент в массиве, в котором все пусто кроме той цены которую я ввел, как сделать так , чтобы я вводил цену и она менялась ?
const app = new Vue({
el: '#app',
data() {
return {
orders: [
{id: 1, Nameorder: 'кола', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000},
{id: 2, Nameorder: 'пепси', amount: 10000, Purchaseprice: 5000, Sellingprice: 3},
{id: 3, Nameorder: 'поп', amount: 10000, Purchaseprice: 5000, Sellingprice: 312312},
{id: 4, Nameorder: 'йцуйц', amount: 10000, Purchaseprice: 5000, Sellingprice: 346},
{id: 5, Nameorder: 'фыв', amount: 10000, Purchaseprice: 5000, Sellingprice: 435734},
{id: 6, Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 3415},
{id: 7, Nameorder: 'фыв', amount: 10000, Purchaseprice: 5000, Sellingprice: 435645},
{id: 8, Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000},
{id: 9, Nameorder: 'ывф', amount: 10000, Purchaseprice: 5000, Sellingprice: 1646346},
{id: 10, Nameorder: '124', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000},
{id: 11, Nameorder: 'йц34', amount: 10000, Purchaseprice: 5000, Sellingprice: 345},
{id: 12, Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 5},
{id: 13, Nameorder: 'фыафыа', amount: 10000, Purchaseprice: 5000, Sellingprice: 1461346},
{id: 14, Nameorder: 'фыа', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000}
],
order: false,
changeprise: false,
peremennay: 0,
chngpr: undefined //это переменная для того чтобы меня цену
}
},
methods: {
LvlProcentage () {
let percentage;
percentage = (this.FirstExp * 100) / this.SecondExp;
return percentage
},
checkAccoutnt () {
if (isNaN(this.Accoutnt)) {
return false
}
return true
},
checkCart () {
if (isNaN(this.Money[0].cart)) {
return false
}
return true
},
checkMedcard () {
if (this.medCard === 'Категорія А') {
return true
}
return false
},
checkFraction () {
if (this.Work[0].rank < 1) {
return false
}
return true
},
checkPrizon () {
if (this.Punishment[1].conclusions === 'Відсутні') {
return 'main__left-punishment-conclusions'
}
return 'main__left-punishment-conclusions-org'
},
checkStraf () {
if (this.Punishment[2].straf === 'Відсутні') {
return 'main__left-punishment-ban'
}
return 'main__left-punishment-ban-org'
},
checkVoice () {
if (this.Punishment[3].voice === 'Відсутні') {
return 'main__left-punishment-voice'
}
return 'main__left-punishment-voice-org'
},
checkChat () {
if (this.Punishment[4].chat === 'Відсутні') {
return 'main__left-punishment-chat'
}
return 'main__left-punishment-chat-org'
},
allOnline () {
return this.Online.reduce((acc, n) => {
return acc += Object.values(n)[0]
}, 0)
},
PoliceOnline () {
return this.Online[2].police + this.Online[3].regionalPolice + this.Online[4].zsu
},
CheckDataForSale() {
if (this.SellAllAmount == null && this.SellIdplayer == null) {
this.greenBTN = false;
this.redBTN = true;
this.ExchangeOffer = false;
return;
}
if (this.SellIdplayer == null) {
this.greenBTN = false;
this.redBTN = true;
this.ExchangeOffer = false;
return;
}
if (this.SellAllAmount != null && this.SellIdplayer != null){
this.greenBTN = true;
this.redBTN = false;
this.ExchangeOffer = true;
}
},
CheckTitleF() {
if (this.Maynotitle === 1) {
return 'property__block-purple'
}
},
CheckTitleS() {
if (this.Maynotitle === 2) {
return 'property__block-purple'
}
},
CheckTitleT() {
if (this.Maynotitle === 3) {
return 'property__block-purple'
}
},
CheckSkald() {
if (this.Sklad === 1) {
return 'whitem__title-text-white '
}
},
CheckZamovlennia() {
if (this.Sklad === 2) {
return 'whitem__title-text-white '
}
},
ClickOrderT() {
this.order = true;
if (this.order === true && this.changeprise === true) {
this.changeprise = false
}
},
ClickOrderF() {
this.order = false;
},
ClickChangeT(id) {
this.changeprise = true;
if (this.order === true && this.changeprise === true) {
this.order = false
}
this.peremennay = id - 1
console.log(id)
},
ClickChangeF() {
this.changeprise = false;
},
ChangePrise() {
this.orders.push({
Sellingprice: this.chngpr
})
}
},
});
body {
background: blue;
}
.whitem__change {
position: absolute;
top: 9.25926vh;
left: 100.81481vh;
width: 28.51852vh;
height: 25.74074vh;
background: linear-gradient(117.75deg, #1A366D 0%, #20114D 100%);
-webkit-box-shadow: 0vh 0.37037vh 5.92593vh rgba(0, 0, 0, 0.5);
box-shadow: 0vh 0.37037vh 5.92593vh rgba(0, 0, 0, 0.5);
border-radius: 1.48148vh;
}
.whitem__change-title {
width: 25vh;
height: 3.33333vh;
display: flex;
align-items: center;
text-align-last: left;
margin-top: 1.48148vh;
margin-left: 1.66667vh;
}
.whitem-change__text {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-size: 3.88889vh;
line-height: 4.72222vh;
letter-spacing: -0.07em;
text-align: center;
color: #FFFFFF;
margin-right: 1.85185vh;
}
.whitem-change__img {
width: 3.33333vh;
height: 3.33333vh;
cursor: pointer;
}
.whitem__change-text {
margin-top: 0.83333vh;
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: 1.66667vh;
line-height: 1.94444vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
letter-spacing: -0.08em;
color: #FFFFFF;
margin-left: 1.66667vh;
width: 18.42593vh;
}
.whitem__change-first {
margin-top: 1.11111vh;
width: 28.51852vh;
height: 4.07407vh;
background: rgba(255, 255, 255, 0.14);
border-radius: 1.48148vh 1.48148vh 0vh 0vh;
display: flex;
align-items: center;
}
.change-first__text {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-size: 2.22222vh;
line-height: 2.59259vh;
letter-spacing: -0.05em;
color: #FFFFFF;
margin-left: 1.75926vh;
}
.whitem__change-second {
margin-top: 0.46296vh;
width: 28.51852vh;
height: 10.64815vh;
background: rgba(255, 255, 255, 0.14);
border-radius: 0vh 0vh 1.48148vh 1.48148vh;
padding: 0.83333vh 1.66667vh 1.66667vh 1.66667vh;
}
.change-second__text {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-size: 2.22222vh;
line-height: 2.59259vh;
letter-spacing: -0.05em;
color: #FFFFFF;
}
.change-second-block {
margin-top: 0.83333vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 25.18519vh;
height: 5vh;
justify-content: space-between;
}
.change-second-inp {
width: 19.44444vh;
height: 5vh;
background: rgba(255, 255, 255, 0.12);
border-radius: 1.11111vh;
padding-left: 0.55556vh;
padding-right: 0.55556vh;
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-size: 3.33333vh;
line-height: 4.07407vh;
letter-spacing: -0.07em;
color: #FFFFFF;
}
.change-second-block-btn {
width: 5vh;
height: 5vh;
background: linear-gradient(135deg, rgba(189, 255, 0, 0.5) 0%, rgba(3, 149, 0, 0.5) 100%);
border-radius: 1.11111vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.btn-img {
width: 4.5vh;
height: 4.5vh;
}
.scroll-table {
margin-top: -0.74074vh;
margin-left: -0.74074vh;
margin-right: -0.74074vh;
}
.scroll-table-body {
height: 31.01852vh;
width: 92.96296vh;
overflow-x: auto;
overflow-x: hidden;
}
.scroll-table table {
border-spacing: 0.74074vh;
margin-bottom: -0.64815vh;
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-size: 1.85185vh;
line-height: 2.22222vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
letter-spacing: -0.06em;
color: #FFFFFF;
}
.scroll-table thead th {
background: rgba(255, 255, 255, 0.3);
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-size: 1.85185vh;
line-height: 2.22222vh;
letter-spacing: -0.07em;
color: #FFFFFF;
}
.scroll-table thead th:nth-child(1) {
width: 27.77778vh;
height: 4.44444vh;
}
.scroll-table thead th:nth-child(2) {
width: 10.09259vh;
height: 4.44444vh;
}
.scroll-table thead th:nth-child(3) {
width: 18.33333vh;
height: 4.44444vh;
}
.scroll-table thead th:nth-child(4) {
width: 19.07407vh;
height: 4.44444vh;
}
.scroll-table thead th:nth-child(5) {
width: 15vh;
height: 4.44444vh;
}
.scroll-table tbody td {
background: rgba(255, 255, 255, 0.1);
}
.scroll-table tbody td:nth-child(1) {
width: 27.77778vh;
height: 3.7037vh;
}
.scroll-table tbody td:nth-child(2) {
width: 10.09259vh;
height: 3.7037vh;
}
.scroll-table tbody td:nth-child(3) {
width: 18.33333vh;
height: 3.7037vh;
}
.scroll-table tbody td:nth-child(4) {
width: 19.07407vh;
height: 3.7037vh;
}
.scroll-table tbody td:nth-child(5) {
width: 5.37037vh;
height: 3.7037vh;
cursor: pointer;
}
.scroll-table tbody td:nth-child(6) {
width: 5.37037vh;
height: 3.7037vh;
cursor: pointer;
}
.scroll-table tbody tr:nth-child(even) {
background: rgba(255, 255, 255, 0.2);
}
.scroll-table-body::-webkit-scrollbar {
width: 2.12963vh;
}
.scroll-table-body::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.12);
border-radius: 9.25926vh;
cursor: pointer;
}
.scroll-table-body::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.65);
border-radius: 9.25926vh;
cursor: pointer;
}
.scroll-table-body::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.45);
border-radius: .92593vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="scroll-table">
<table>
<thead>
<tr>
<th>Товар</th>
<th>Колво</th>
<th>Цена закупки</th>
<th>Цена продажи</th>
<th>Статус</th>
</tr>
</thead>
</table>
<div class="scroll-table-body">
<table>
<tbody>
<tr v-for="order in orders" :key="order.id">
<td>{{order.Nameorder}}</td>
<td>{{order.amount}}</td>
<td>{{order.Purchaseprice}}</td>
<td>{{order.Sellingprice}}</td>
<td @click="ClickChangeT(order.id)"><img class="changeprise" src="./img/changeprise.svg"></td>
<td @click="ClickOrderT()"><img class="deliverorder" src="./img/deliverorder.svg"></td>
</tr>
</tbody>
</table>
</div>
<div class="backfonforscroll"></div>
<div class="whitem__change" v-if="changeprise">
<div class="whitem__change-title">
<div class="whitem-change__text">Замена цены</div>
<img class="whitem-change__img" src="./img/krest.svg" @click="ClickChangeF()">
</div>
<div class="whitem__change-text">Укажите цену
</div>
<div class="whitem__change-first">
<div class="change-first__text">Цена сейчас: {{orders[peremennay].Sellingprice}}</div>
</div>
<div class="whitem__change-second">
<div class="change-second__text">Новая цена:</div>
<div class="change-second-block">
<input type="text" class="change-second-inp" v-model="chngpr" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
<div class="change-second-block-btn" @click="ChangePrise()">
<img src="./img/doneicon.svg" class="btn-img">
</div>
</div>
</div>
</div>
</div>
</div>