1

Мне нужно сменить значение атрибута src из переменной в data. Возможно ли это сделать и как?

<template>
  <div>
    <router-link to = "/film1_descr" class="line">
        
    <div>
       <div class="card">
           <div >
               <img src="//значение" alt="" class="img-part">
           </div>
           <div class="name-year-part">
               <p class="text">{{title1}}</p>
               <p class="text-muted">{{year1}}</p>
           </div>
       </div>
    </div>

    </router-link>
    <router-link to = "/film2_descr" class="line">
        <div>
       <div class="card">
           <div >
               <img src="src/assets/mile.jpg" alt="" class="img-part">
           </div>
           <div class="name-year-part">
               <p class="text">{{title2}}</p>
               <p class="text-muted">{{year2}}</p>
           </div>
       </div>
    </div>
    </router-link>
    <router-link to = "/film3_descr" class="line">
           <div>
       <div class="card">
           <div >
               <img src="src/assets/forest.jpeg" alt="" class="img-part">
           </div>
           <div class="name-year-part">
               <p class="text">{{title3}}</p>
               <p class="text-muted">{{year3}}</p>
           </div>
       </div>
    </div>
    </router-link>
    <router-view></router-view>
  </div>

</template>

<script>
import database from './database.js';


export default {
  data() {
    return {
      
      title1: database[0].name,
      year1: database[0].year,
      src1: database[0].src, //нужно поместить в src это значение

      title2: database[1].name,
      year2: database[1].year,
      src2: database[1].src,

      title3: database[2].name,
      year3: database[2].year,
      src3: database[2].src
    }
  },
 
}
</script>

0

2 ответа 2

5

Наверно пробовали вот так по аналогии

<img src ='{{my_var}}'>

и не получилось?

Для этого есть специальный синтаксис (директива):

v-bind:src='my_var' 

или

:src='my_var'

Подробнее в справке: Синтаксис шаблонов

Переменные в data реактивны, как только поменяете значение - сразу отрисуется новое значение.

А вот тут небольшой пример есть, как по кнопке менять src у картинки: https://www.tutorialsplane.com/vue-js-change-image-src/

<div id="app">  
    <p>{{image1}}</p>
    <img :src='image1'><br>
    <button @click="myFunction()">Click Me</button>
</div>
<script>
 new Vue({
el: '#app',

  data: { 
      image1 :"https://www.tutorialsplane.com/wp-content/uploads/2018/01/nature-3082832_640.jpg",
      image2 :'https://www.tutorialsplane.com/wp-content/uploads/2018/01/away-3024773_640.jpg'
  },

   methods:{
    myFunction: function () {   
        this.image1 = this.image2;
    }
   }

});
</script>   
0

новый синтаксис :attribute = "myVar", пример:

   <v-btn :loading="loadingDetach"
    icon color="error"
    @click="detachCourse(course)">
    <v-icon>mdi-link-off</v-icon>
   </v-btn>

Ваш ответ

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

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