0

new Vue({
   el: '#menu',
   data: {
     active: null,
     items: [
       { text: 'один' },
       { text: 'два' },
       { text: 'три' },
       { text: 'четыре' },
       { text: 'пять' },
     ],
     image: 0,
    images: [
      'https://specials-images.forbesimg.com/imageserve/5babef3da7ea4342a948c024/416x416.jpg?background=000000&cropX1=1318&cropX2=2825&cropY1=226&cropY2=1732',
      'https://pixel.nymag.com/imgs/daily/intelligencer/2018/08/24/24-donald-trump-2.w700.h700.jpg',
      'https://pixel.nymag.com/imgs/daily/intelligencer/2018/11/29/29-trump-rich.w700.h700.jpg','https://specials-images.forbesimg.com/imageserve/5babef3da7ea4342a948c024/416x416.jpg?background=000000&cropX1=1318&cropX2=2825&cropY1=226&cropY2=1732', 'https://pixel.nymag.com/imgs/daily/intelligencer/2018/08/24/24-donald-trump-2.w700.h700.jpg',
    ],
   },
 });
.main {
   display: flex;
   width: 700px;
   height: 385px;
   background: rgba(0, 0, 0, 0.45);
   box-shadow: 0px 4px 32px 3px rgba(0, 0, 0, 0.25);
   backdrop-filter: blur(20px);
   border-radius: 20px;
}

.left__part {
   width: 330px;
   padding: 30px;
   background: #0072E7;
   opacity: 0.4;
   box-shadow: 0px 4px 32px 3px rgba(0, 0, 0, 0.25);
   border-radius: 20px 0px 0px 20px;
}

.left__part-item {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 500;
   font-size: 22px;
   line-height: 27px;
   color: rgba(255, 255, 255, 0.5);
   text-decoration: none;
   list-style: none;
   text-align: right;
   line-height: 2.2;
   cursor: pointer;
}

.left__part-btnlist {
   display: flex;
   justify-content: space-between;
   margin-top: 30px;
}

.left__part-btnitem {
   background-color: rgb(128,128,128);
   opacity: 0.15;
   border-radius: 8px;
   width: 120px;
   height: 40px;
   color: #FFFFFF;
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 500;
   font-size: 18px;
   line-height: 22px;
   color: #FFFFFF;
   cursor: pointer;
}

.right__part {
   width: 370px;
   padding: 30px;
   background: rgba(0, 0, 0, 0.45);
   box-shadow: 0px 4px 32px 3px rgba(0, 0, 0, 0.25);
   backdrop-filter: blur(20px);
   position: relative;
   border-radius: 0px 20px 20px 0px;
}

.right__part-close {
   position: relative;
}

.right__part-circle {
   height: 40px;
   width: 40px;
   background-color: rgb(128,128,128);
   float: right;
   border-radius: 50%;
}

.right__part-x {
   position: absolute;
   top: 12px;
   right: 11px;
}

.right__part-img {
   position: absolute;
   top: 70px;
   left: 60px;
}

.right__part-inform {
   position: absolute;
   bottom: 30px;
   left: 30px;
   background-color: rgb(128,128,128);
   width: 310px;
   height: 40px;
   border-radius: 10px;
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 500;
   font-size: 18px;
   line-height: 22px;
   color: #FFFFFF;
   display: flex;
   align-items: center;
   text-align: center;
   justify-content: center;
}
img {
  width: 200px;
  height: 200px;
}
.active {
   color: #FFFFFF;
   font-weight: 600;
 }
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<div class="wraper">
      <div class="container">
         <div class="main">
            <div class="left__part">
               <div id="menu" class="left__part-item">
                  <div
                    v-for="(item, i) in items"
                    @click="active = i"
                    :class="{ active: i === active }"
                  >{{ item.text }}</div>
                </div>
            </div>
            <div class="right__part">
               <img :key="image" :src="images[image]">
            </div>  
         </div>
      </div>
   </div>

1
  • Как изменит картинку по нажатию на одну из перечисленных слов , Один Два Три и тд. 29 мая 2022 в 17:39

1 ответ 1

1

У вас vue не имеет доступа к элементу DOM class="right__part", в котором вы хотите вывести изображение. Расширьте полномочия vue, чтобы все элементы, в которых вы хотите получить поддержку vue входили в элемент, к которому он будет подключен.

   <div id="main" class="main">
      <div class="left__part">
        <div id="menu" class="left__part-item">
          <div v-for="(item, i) in items" @click="active = i" :class="{ active: i === active }">
            {{ item.text }}
          </div>
        </div>
      </div>
      <div class="right__part">
        <img :src="images[active]">
      </div>
    </div>

И определитесь с индексом активного изображения: если при нажатии кнопки изменяете индекс и используете для хранения текущего активного индекса переменную active, тогда вероятно нужно использовать active для вывода изображения, соответствующего данному индексу:

<img :src="images[active]">

Рабочий пример для наглядности:

new Vue({
  el: '#main',
  data: {
    active: 0,
    items: [{
        text: 'один'
      },
      {
        text: 'два'
      },
      {
        text: 'три'
      },
      {
        text: 'четыре'
      },
      {
        text: 'пять'
      },
    ],
    image: 0,
    images: [
      'https://picsum.photos/id/1/400/400',
      'https://picsum.photos/id/2/400/400',
      'https://picsum.photos/id/3/400/400',
      'https://picsum.photos/id/4/400/400',
      'https://picsum.photos/id/5/400/400',
    ],
  },
});
.main {
  display: flex;
  width: 700px;
  height: 385px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 0px 4px 32px 3px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(20px);
  border-radius: 20px;
}

.left__part {
  width: 330px;
  padding: 30px;
  background: #0072E7;
  opacity: 0.4;
  box-shadow: 0px 4px 32px 3px rgba(0, 0, 0, 0.25);
  border-radius: 20px 0px 0px 20px;
}

.left__part-item {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
  line-height: 27px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  list-style: none;
  text-align: right;
  line-height: 2.2;
  cursor: pointer;
}

.left__part-btnlist {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.left__part-btnitem {
  background-color: rgb(128, 128, 128);
  opacity: 0.15;
  border-radius: 8px;
  width: 120px;
  height: 40px;
  color: #FFFFFF;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  color: #FFFFFF;
  cursor: pointer;
}

.right__part {
  width: 370px;
  padding: 30px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 0px 4px 32px 3px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(20px);
  position: relative;
  border-radius: 0px 20px 20px 0px;
}

.right__part-close {
  position: relative;
}

.right__part-circle {
  height: 40px;
  width: 40px;
  background-color: rgb(128, 128, 128);
  float: right;
  border-radius: 50%;
}

.right__part-x {
  position: absolute;
  top: 12px;
  right: 11px;
}

.right__part-img {
  position: absolute;
  top: 70px;
  left: 60px;
}

.right__part-inform {
  position: absolute;
  bottom: 30px;
  left: 30px;
  background-color: rgb(128, 128, 128);
  width: 310px;
  height: 40px;
  border-radius: 10px;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

img {
  width: 200px;
  height: 200px;
}

.active {
  color: #FFFFFF;
  font-weight: 600;
}
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<div class="wraper">
  <div class="container">
    <div id="main" class="main">
      <div class="left__part">
        <div id="menu" class="left__part-item">
          <div v-for="(item, i) in items" @click="active = i" :class="{ active: i === active }">
            {{ item.text }}
          </div>
        </div>
      </div>
      <div class="right__part">
        <img :src="images[active]">
      </div>
    </div>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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