Сделать первый элемент при открытии страницы активным, смена фото по нажатиям на слова?

Question

[Young11]

Как мне передать фото , через класс их добавить или как ?

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
   <div class="wraper">
      <div class="gettosklad" id="gettosklad">
         <div class="left-col">
            <div class="tabs1">
               <div id="gettosklad-money" class="tab" @click="activate(1)" :class="{ active : active_el == 1 }">Деньги</div>
               <div id="gettosklad-med" class="tab" @click="activate(2)" :class="{ active : active_el == 2 }">Аптечка</div>
               <div id="gettosklad-drugs" class="tab" @click="activate(3)" :class="{ active : active_el == 3 }">Нарко</div>
               <div id="gettosklad-guns" class="tab" @click="activate(4)" :class="{ active : active_el == 4 }">Оружие</div>
               <div id="gettosklad-gunparts" class="tab" @click="activate(5)" :class="{ active : active_el == 5 }">Оруж склад</div>
            </div>
            <div class="buttons">
               <button class="take" id="take">взять</button>
               <button class="drop" id="put">положить</button>
            </div>
         </div>
         <div class="right-col">
             <div class="close" id="exit"></div>
             <div class="icon" :src="images[active_el]"></div>
             <div class="count">Наличие:<span> 100500</span></div>
         </div>
     </div>
   </div>

.gettosklad {
   display: flex;
   width: 64.81481vh;
   height: 35.64815vh;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%, -50%);
}

.gettosklad>.left-col {
   display: flex;
   width: 30.55556vh;
   height: 100%;
   flex-direction: column;
   background: rgba(0, 114, 231, .4);
   border-radius: 1.85185vh 0 0 1.85185vh;
   box-shadow: 0 .37037vh 2.96296vh .27778vh rgba(0, 0, 0, .25);
   padding: 3.7037vh 2.77778vh 0 0;
   position: relative;
   cursor: pointer;
}

.gettosklad>.left-col>.tabs1 {
   display: flex;
   width: 100%;
   flex-direction: column;
   align-items: flex-end
}

.gettosklad>.left-col>.tabs1>.tab {
   color: hsla(0, 0%, 100%, .5);
   font-family: Montserrat-Medium, sans-serif;
   font-weight: 500;
   font-size: 2.03704vh
}

.gettosklad>.left-col>.tabs1>.tab:not(:first-child) {
   margin-top: 2.31481vh
}

.gettosklad>.left-col>.tabs1>.tab.active {
   color: #fff;
   font-family: Montserrat-Bold, sans-serif;
   font-weight: 700
}

.gettosklad>.left-col>.buttons {
   display: flex;
   width: 100%;
   justify-content: space-between;
   padding: 0 2.77778vh;
   position: absolute;
   left: 0;
   bottom: 2.77778vh
}

.gettosklad>.left-col>.buttons>button {
   width: 11.11111vh;
   height: 3.7037vh;
   background: hsla(0, 0%, 100%, .15);
   color: #fff;
   font-family: Montserrat-Medium, sans-serif;
   font-weight: 500;
   font-size: 1.66667vh;
   border: unset;
   border-radius: .74074vh
}

.gettosklad>.left-col>.buttons>button:active {
   filter: brightness(.8)
}

.gettosklad>.right-col {
   width: 34.25926vh;
   height: 100%;
   flex-direction: column;
   background: rgba(0, 0, 0, .45);
   border-radius: 0 1.85185vh 1.85185vh 0;
   box-shadow: 0 .37037vh 2.96296vh .27778vh rgba(0, 0, 0, .25);
   position: relative
}

.gettosklad>.right-col, .gettosklad>.right-col>.close {
   display: flex;
   justify-content: center;
   align-items: center
}

.gettosklad>.right-col>.close {
   width: 3.7037vh;
   height: 3.7037vh;
   background: hsla(0, 0%, 100%, .15);
   border-radius: 50%;
   position: absolute;
   top: 2.77778vh;
   right: 2.77778vh
}

.gettosklad>.right-col>.close:active {
   filter: brightness(.8)
}

.gettosklad>.right-col>.close {
   width: 3.7037vh;
   height: 3.7037vh;
   background: hsla(0, 0%, 100%, .15);
   border-radius: 50%;
   position: absolute;
   top: 2.77778vh;
   right: 2.77778vh
}

.gettosklad>.right-col>.close:active {
   filter: brightness(.8)
}

.gettosklad>.right-col>.close:before {
   content: "";
   display: block;
   width: 1.57407vh;
   height: 1.57407vh;
   background: url(../../img/x.svg) no-repeat 50%;
   background-size: contain
}

.gettosklad>.right-col>.icon {
   display: block;
   width: 22.12963vh;
   height: 18.24074vh;
   background: url(../../img/money.svg) no-repeat 50%;
   background-size: cover;
   margin-bottom: 3.7037vh;
   position: absolute
}

.gettosklad>.right-col>.icon.medicpack {
   background-image: url(../../img/heal.svg)
}

.gettosklad>.right-col>.icon.drugs {
   background-image: url(../../img/narko.svg)
}

.gettosklad>.right-col>.icon.guns {
   background-image: url(../../img/gun.svg)
}

.gettosklad>.right-col>.icon.gunparts {
   background-image: url(../../img/gunmatirials.svg)
}

.gettosklad>.right-col>.count {
   display: flex;
   width: 28.7037vh;
   height: 3.7037vh;
   justify-content: center;
   align-items: center;
   background: hsla(0, 0%, 100%, .15);
   color: #fff;
   font-family: Montserrat-Medium, sans-serif;
   font-weight: 500;
   font-size: 1.66667vh;
   border-radius: .74074vh;
   position: absolute;
   bottom: 2.77778vh
}

const app = new Vue({
  el: '#gettosklad',
  data: {
    active_el:0,
  },
  methods:{
    activate:function(el){
        this.active_el = el;
    }
  }
});

Answer 1

[FeST1VaL]

честно говоря не понятно что в итоге должно получится. вы можете добавить функцию которя будет возвращать вам путь до картинки в src
:src="getImg(active_el)"

getImg(index) {
      let result;
      try {
        result = require("../images/" + index+ '.png');
      } catch (e) {
        /* if (e.code !== "MODULE_NOT_FOUND") {
          throw e;
        } */
        result = require("../images/default.png");
      }
      return result;
    },

насчет первой части вопроса, то у вас же проверяется равен ли единице элемент активный, а в дата у вас 0

з.ы интересно правильно ли я подумал что это верстка для гта сервера?)

Comments

[Young11]

Да , вы верно подметили - это верстка для гта ) , с первым вопросом разобрался

[Young11]

Насчет вашего кода , не сильно понял , как он работает и куда его надо пихать у меня в коде (

[FeST1VaL]

Young11, метод и там где картинка должна появится
<div class="icon" :src="images[active_el]"></div>

тут получается

[FeST1VaL]

Young11, а про гта подумал тк тоже этим занимаюсь если хотите мелкие вопросы можете в дс писать FeST1VaL#7013 , если не буду занят то хэлпану

[Young11]

const app = new Vue({
  el: '#gettosklad',
  data: {
    active_el: 0,
    images:0,
    images: [
      'img/money.svg',
      'img/heal.svg',
      'img/narko.svg',
      'img/gun.svg',
      'img/gunmatirials.svg'
    ]
  },
  methods:{
    activate:function(el){
        this.active_el = el;
    }
  }
});

Добавил так , но все равно что-то не переключаются