БЛОГ НА HUSL


Как обратится к элементу из списка v-for

Автор вопроса: Дмитрий

Как сделать проверку , что если допустим нажал на в первом блоке на слово "Посмотреть" , чтобы у меня отображались одобрить и отказать только для первого блока , а не для всех ?

new Vue({
   el: '#app',
   data() {
     return {
      requestnames: [{},{},{},{}],
      qwers: [],
      requesT: undefined,
      requesTT: undefined,
     }
   }
 });
.secon {
   background: rgba(0, 0, 0, 0.45);
   box-shadow: 0vh 0.6006vh 4.804vh 0.4504vh rgba(0, 0, 0, 0.25);
   border-radius: 3.003vh;
   width: 55.3vw;
   height: 75.3103vh;
}

.head-request {
   height: 8.610vh;
   background: linear-gradient(rgba(41, 146, 254, 0.65));
   box-shadow: 0vh 0.6006vh 4.804vh 0.45vh rgba(0, 0, 0, 0.25);
   border-radius: 3.003vh 3.003vh 0vh 0vh;
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 500;
   font-size: 3.405vh;
   line-height: 6.756vh;
   letter-spacing: -0.04em;
   color: #FFFFFF;
   text-shadow: 0vh 0.4504vh 0.75vh rgba(0, 0, 0, 0.4);
   display: flex;
   align-items: center;
   padding-left: 3.003vh;
}

.main-request {
   margin: 2.38vh;
}

.mainrequesters {
   display: flex;
   flex-wrap: wrap;
}

.name-player {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 500;
   font-size: 2.38vh;
   line-height: 110%;
   display: flex;
   align-items: center;
   letter-spacing: -0.06em;
   color: #FFFFFF;
   padding-bottom: 0.7462vh;
   padding-left: 0.7462vh;
}

.zapros-player {
   height: 13.223vh;
   width: 30.128vh;
   background: linear-gradient(rgba(255, 255, 255, 0.3));
   box-shadow: 0vh 0.6611vh 0.6611vh rgba(0, 0, 0, 0.5);
   border-radius: 1.49vh;
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 500;
   font-size: 2.089vh;
   line-height: 2.89vh;
   display: flex;
   align-items: center;
   letter-spacing: -0.06em;
   color: #FFFFFF;
   display: flex;
   justify-content: left;
   padding-left: 0.7462vh;
}

.name-admin {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 500;
   font-size: 2.38vh;
   line-height: 110%;
   display: flex;
   justify-content: right;
   letter-spacing: -0.06em;
   color: blue;
   padding-top: 2.238vh;
   padding-bottom: 0.7462vh;
}

.accept {
   height: 5.223vh;
   width: 34.328vh;
   background: linear-gradient(rgba(255, 255, 255, 0.3));
   box-shadow: 0vh 0.6611vh 0.6611vh  rgba(0, 0, 0, 0.5);
   border-radius: 1.49vh;
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 500;
   font-size: 2.089vh;
   line-height: 110%;
   display: flex;
   float: right;
   color: lightgreen;
   justify-content: right;
   align-items: center;
   padding-right: 0.7462vh;
}

.refusal {
   height: 5.223vh;
   width: 34.328vh;
   background: linear-gradient(rgba(255, 255, 255, 0.3));
   box-shadow: 0vh 0.6611vh 0.6611vh  rgba(0, 0, 0, 0.5);
   border-radius: 1.49vh;
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 500;
   font-size: 2.089vh;
   line-height: 110%;
   display: flex;
   float: right;
   color: red;
   justify-content: right;
   align-items: center;
   padding-right: 0.7462vh;
}

.buttons {
   display: flex;
   justify-content: space-around;
}

.accept-request {
   height: 5vh;
   width: 12vw;
   background: lightgreen;
   border-radius: 1.49vh;
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 500;
   font-size: 2.38vh;
   line-height: 110%;
   color: #FFFFFF;
   &:active {
      background: linear-gradient(rgba(144, 238, 144, 0.7));
   }
}

.refusal-reauet {
   height: 5vh;
   width: 12vw;
   background: red;
   border-radius: 1.49vh;
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 500;
   font-size: 2.38vh;
   line-height: 110%;
   color: #FFFFFF;
   &:active {
      background: linear-gradient(rgba(255, 0, 0, 0.7));
   }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">  
<div class="secon">
               <div class="head-request">
                  Замена
               </div>
               <div class="mainrequesters">
         <div class="main-request" v-for="requestname in requestnames">
              <div class="zapros-player">Нове имя:  <br>
                        id  <br>  
                        Статус <br> 
                     </div>
                     <button class="rozsmatret" v-on:click="requesTT =                         'reqq'">Посмотреть</button>
                     <button class="sxvaliti" v-if="requesTT ==                                  'reqq'">Одобрить</button>
                     <button class="otkaz" v-if="requesTT ==                                      'reqq'">Отказать</button>
               </div>
         </div>
     </div>
</div>


Источник

Ответы (1 шт):

Автор решения: Vladimir Gonchar

Вот так, например. Просто записываете индекс и сверяете. Если надо скрывать - просто его можете затирать (тогда в methods функцию вынести можно).

new Vue({
  el: '#app',
  data() {
    return {
      requestnames: [{}, {}, {}, {}],
      qwers: [],
      requesT: undefined,
      requesTT: undefined,
      currentElement: null,
    }
  },
});
.secon {
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 0vh 0.6006vh 4.804vh 0.4504vh rgba(0, 0, 0, 0.25);
  border-radius: 3.003vh;
  width: 55.3vw;
  height: 75.3103vh;
}

.head-request {
  height: 8.610vh;
  background: linear-gradient(rgba(41, 146, 254, 0.65));
  box-shadow: 0vh 0.6006vh 4.804vh 0.45vh rgba(0, 0, 0, 0.25);
  border-radius: 3.003vh 3.003vh 0vh 0vh;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 3.405vh;
  line-height: 6.756vh;
  letter-spacing: -0.04em;
  color: #FFFFFF;
  text-shadow: 0vh 0.4504vh 0.75vh rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  padding-left: 3.003vh;
}

.main-request {
  margin: 2.38vh;
}

.mainrequesters {
  display: flex;
  flex-wrap: wrap;
}

.name-player {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 2.38vh;
  line-height: 110%;
  display: flex;
  align-items: center;
  letter-spacing: -0.06em;
  color: #FFFFFF;
  padding-bottom: 0.7462vh;
  padding-left: 0.7462vh;
}

.zapros-player {
  height: 13.223vh;
  width: 30.128vh;
  background: linear-gradient(rgba(255, 255, 255, 0.3));
  box-shadow: 0vh 0.6611vh 0.6611vh rgba(0, 0, 0, 0.5);
  border-radius: 1.49vh;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 2.089vh;
  line-height: 2.89vh;
  display: flex;
  align-items: center;
  letter-spacing: -0.06em;
  color: #FFFFFF;
  display: flex;
  justify-content: left;
  padding-left: 0.7462vh;
}

.name-admin {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 2.38vh;
  line-height: 110%;
  display: flex;
  justify-content: right;
  letter-spacing: -0.06em;
  color: blue;
  padding-top: 2.238vh;
  padding-bottom: 0.7462vh;
}

.accept {
  height: 5.223vh;
  width: 34.328vh;
  background: linear-gradient(rgba(255, 255, 255, 0.3));
  box-shadow: 0vh 0.6611vh 0.6611vh rgba(0, 0, 0, 0.5);
  border-radius: 1.49vh;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 2.089vh;
  line-height: 110%;
  display: flex;
  float: right;
  color: lightgreen;
  justify-content: right;
  align-items: center;
  padding-right: 0.7462vh;
}

.refusal {
  height: 5.223vh;
  width: 34.328vh;
  background: linear-gradient(rgba(255, 255, 255, 0.3));
  box-shadow: 0vh 0.6611vh 0.6611vh rgba(0, 0, 0, 0.5);
  border-radius: 1.49vh;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 2.089vh;
  line-height: 110%;
  display: flex;
  float: right;
  color: red;
  justify-content: right;
  align-items: center;
  padding-right: 0.7462vh;
}

.buttons {
  display: flex;
  justify-content: space-around;
}

.accept-request {
  height: 5vh;
  width: 12vw;
  background: lightgreen;
  border-radius: 1.49vh;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 2.38vh;
  line-height: 110%;
  color: #FFFFFF;
  &:active {
    background: linear-gradient(rgba(144, 238, 144, 0.7));
  }
}

.refusal-reauet {
  height: 5vh;
  width: 12vw;
  background: red;
  border-radius: 1.49vh;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 2.38vh;
  line-height: 110%;
  color: #FFFFFF;
  &:active {
    background: linear-gradient(rgba(255, 0, 0, 0.7));
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="secon">
    <div class="head-request">
      Замена
    </div>
    <div class="mainrequesters">
      <div class="main-request" v-for="(requestname, i) in requestnames">
        <div class="zapros-player">Нове имя: <br> id <br> Статус <br>
        </div>
        <button class="rozsmatret" v-on:click="currentElement = i">Посмотреть</button>
        <button class="sxvaliti" v-if="currentElement === i">Одобрить</button>
        <button class="otkaz" v-if="currentElement === i">Отказать</button>
      </div>
    </div>
  </div>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.