0

У меня есть микро меню, при нажатии на 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>

1 ответ 1

1

Записывать цену в редактируемый элемент, а не пушить новый в массив (push используется для добавления, не обновления).

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: {
    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[this.peremennay].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)">Edit</td>
            <td @click="ClickOrderT()">Order</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>
        <span class="whitem-change__img" @click="ClickChangeF()">Close</span>
      </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(peremennay)">
            Done
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1
  • Но Ваш код у меня в целом вызывает много вопросов. Не понятно, зачем используется столько переменных и методов... 5 окт 2022 в 20:28

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.