Как вставить src свойство динамически vue.js?

Question

[MarEeeeee]

Мой компонент. Для img хочу добавлять src своойство, которое приходит с сервера, но почему-то не получается это сделать. В чем ошибка?

<template>
    <div class = "row__elements">
       <div @click="event =>clickOnRow(elem, whichScreen)" class = "row__element" v-bind:class = "activeClass">           
           <img class = "file-info icon" :src = "imgSrc(elem)"/>           
           <div class = "file-info title"> {{elem.fileName}} </div>
           <div class = "file-info size"> {{elem.sizeOrType}} </div>
           <div class = "file-info date"> {{elem.dateOfChange}} </div>                          
        </div>   
    </div>
</template>

imgSrc: function(elem){
            console.log(this.elem.icon);
            console.log(typeof(this.elem.icon));
            console.log("не зис", elem.icon);
            console.log(typeof(elem.icon));
            return elem.icon
        }

Comments

[Алексей Ярков]

В чем ошибка?

Тот же самый вопрос и у нас всех.

[MarEeeeee]

Алексей Ярков, я ниже отправил более развернутый фрагмент моего кода, может посмотрите тоже? пожалуйста

[Aetae]

@click="event =>clickOnRow(elem, whichScreen)"
кто вас научил так делать?
@click="clickOnRow(elem, whichScreen)"

[MarEeeeee]

Aetae, Ой, смешал два разных варианта записи, понял. Поправил, спасибо

Answer 1

[Andrey Vasilev]

в том что ты должен вернуть просто elem
return elem
в :src="imgSrc.img" или где у тебя картинка лежит
соответсвенно и везде где интерполяция по типу elem.fileName - это неправильно
правильно будет imgSrc.fileName

Comments

[MarEeeeee]

у меня это все хранится в объекте, попробовал сделат как вы написали - не работает

[Andrey Vasilev]

MarEeeeee
Объясняю порядок действий:
1) У тебя есть метод для получения данных с сервера.
2) После клика помещаем в какую-нибудь переменную из data() весь этот объект.
3) После чего мы сможем отрисовать что требуется.

data() {
 return {
  object: {}
 }
}

в методе, где получаем данные:
this.object = полученный объёкт

в разметке {{object.fileName}} и т.п.

Я не понимаю просто как у тебя всё это работает, опиши поподробнее. Возможно тебе без клика нужно что-то получить или что-то ещё?

[MarEeeeee]

Andrey Vasilev, Могу я написать вам в вк или телеграм, для того, чтобы упростить взимодействие?

[Andrey Vasilev]

MarEeeeee, к сожалению, нет времени на данный момент

[MarEeeeee]

Andrey Vasilev
Вот так выглядит код для мого компонента.
Идея в том, что с сервера мне приходит массив объектов, который я в массиве разбиваю на строке в которых хранится информация. А потом обрабатывая взаимодействие с каждой строкой по отдельности

<template>
    <div class = "row__elements">
       <div @click="event =>clickOnRow(elem, whichScreen)" class = "row__element" v-bind:class = "activeClass">           
           <img class = "file-info icon" :src = "imgSrc.icon"/>           
           <div class = "file-info title"> {{elem.fileName}} </div>
           <div class = "file-info size"> {{elem.sizeOrType}} </div>
           <div class = "file-info date"> {{elem.dateOfChange}} </div>                          
        </div>   
    </div>
</template>


<script>
export default {
    props:{
        elem:{
            type:Object,
            default: () => ({}),
                        
        },
        whichScreen:{
            type:Boolean,
            // default: false,
        },
    },
    
    data()
        { 
            return{
                delay: 500,
                clicks: 0,
                timer: null,
                activeClass:"",                             
            } 
        },
    methods:{
       clickOnRow: function(elem, whichScreen){
          this.clicks++   
          if(this.clicks === 1) {
            var self = this
            this.timer = setTimeout(function() {            
            console.log("одинарный");                 
              self.clicks = 0
            }, this.delay);
            elem['buttonON'] = true; // нужно ?
            // makeActive();
            console.log(elem.buttonON);
            elem["whichScreen"] = whichScreen;
            this.$emit("selectelem", elem)
          } else{
             clearTimeout(this.timer);
             console.log("двойной");
             elem['whichScreen']  = whichScreen;   
             elem['downOrUp'] = true;
             this.clicks = 0;                
            fetch('/currentDir1',{
                    method: 'POST',
                    mode: 'cors',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'                 
                    },
                    body: JSON.stringify(elem)                
                    })                    
                    .then(response => response.json()) 
                    .then(json =>this.$emit("newvalue", [json.table, whichScreen]))   
          }        	
        },
        makeActive:function(elem){
            this.activeClass = elem;
        },
        imgSrc: function(elem){            
            return elem
        },
        // addDefaultValue: function(elem){
        //     if(elem){
        //         return elem
        //     }else{
        //         return ""
        //     } 
        // }
        
    }, 
}
</script>


<style scoped>
.row__element{

    width: 632px;
    margin: auto;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
     margin: 0;
    border: 1px solid black;    
}
.file-info{
    
    margin:auto auto auto 15px;
}

.title{
    width: 300px;
}

.size{
    width: 132px;
}

.date{
    width: 200px;
}
.active-row{
    border: 2px solid blue;
    
}
.icon{
    width: 20px;
    height: 20px;
}

</style>

[Andrey Vasilev]

MarEeeeee,

[Andrey Vasilev]

MarEeeeee, может поможет, принцип приблизительно такой же
только в this.object тебе нужно результат запроса положить, а в разметке обратиться к нужным данным.
если их несколько или нужно перебрать что-то, то либо используй v-for, либо вычисляемое св-во, которое будет отрабатывать при изменеии this.object