動態模態（materialize.css）不打開Vue，js

Question

我在Vue.js中有一個組件，我在其中創建動態模態，但是我無法打開它們，我想我正在做的一切都是正確的，因爲我們調用功能，並將其與警報（響應），但它不打開模態

<template> 
<div v-for="(index,noticia) in noticias"> 
    <div class="col s12 m12 l12"> 
     <div id="modal-{{noticia.id}}" class="modal" v-if="noticia.videoValue == false"> 
      <div class="modal-content"> 
       <div class="video-container"> 
        <youtube :video-id.sync="videoId"></youtube> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Fechar</a> 
      </div> 
     </div> 
     <div class="card horizontal"> 
      <!-- Mostra imaggem do lado direito --> 
      <div class="card-image waves-effect waves-block waves-light" v-if="pair(index)"> 
       <img class="responsive-img" @click.prevent.sync="openModal(noticia.id)" 
        :src="'storage/noticias/images/' + noticia.photo" 
        :class="{'activator': noticia.videoValue}"/> 
      </div> 

      <div class="card-stacked"> 
       <div class="card-content"> 
        <span class="card-title activator grey-text text-darken-4">{{ noticia.title }}<i class="material-icons right">more_vert</i></span><br/> 
        <span class="card-date">{{ noticia.created_at.date | date-format }}</span> 
        <p>{{ noticia.description | substring 140}}</p> 
        <p><span v-for="tag in noticia.tags"><a href="#!" @click="searchByTag(tag.tag)">#{{ tag.tag }}</a> </span></p> 
       </div> 
      </div> 

      <!-- Mostra imaggem do lado esquerdo --> 
      <div class="card-image waves-effect waves-block waves-light" v-if="impar(index)"> 
       <img class="responsive-img" @click.prevent.sync="openModal(noticia.id)" 
        :src="'storage/noticias/images/' + noticia.photo" 
        :class="{'activator': noticia.videoValue}"/> 
      </div> 

      <div class="card-reveal"> 
       <span class="card-title grey-text text-darken-4">{{ noticia.title }}<i class="material-icons right">close</i></span> 
       <p>{{ noticia.description }}</p> 
       <p><span v-for="tag in noticia.tags"><a href="#!" @click="searchByTag(tag.tag)">#{{ tag.tag }}</a> </span></p> 
      </div> 
     </div> 
    </div> 
    <hr/> 
</div> 

<pagination v-if.sync="showPagination === true" 
     :per-page="pagination.per_page" 
     :current-page.sync="pagination.current_page" 
     :total-records="pagination.total"> 
</pagination> 

<script type="text/javascript"> 


import PaginationComponent from './Pagination.vue'; 
import VueYouTubeEmbedComponent from 'vue-youtube-embed'; 
Vue.filter('substring', require('../filters/substring')); 
Vue.filter('date-format', require('../filters/date-format')); 
Vue.use(VueYouTubeEmbedComponent); 
export default{ 
    components: { 
     'pagination': PaginationComponent, 
    }, 

    created(){ 
     this.getNoticias(); 
    }, 
    data(){ 
     return { 
      noticias: [], 
      week: "", 
      loading: false, 
      showPagination: false, 
      currentTag: "", 
      pagination: { 
       current_page: 0, 
       per_page: 0, 
       total: 0, 
      }, 
      videoId: "", 
     } 
    }, 
    methods: { 
     getNoticias(){ 
      this.showPagination = false; 
      Vue.http.get('weekNoticias/' + this.week).then((response) => { 

       let noticias = response.data.noticias.data; 

       $.each(noticias, (index, value) => { 
        if (value.video != '') { 
         value.videoValue = false; 
        } else { 
         value.videoValue = true; 
        } 
       }); 

       this.noticias = noticias; 
       this.week = response.data.week; 
      }); 
     }, 
     searchByTag(tag){ 
      this.currentTag = tag; 
      this.showPagination = true; 
      Vue.http.get('searchByTag/' + tag).then((response) => { 
       let noticias = response.data.data; 
       ; 

       $.each(noticias, (index, value) => { 
        if (value.video != '') { 
         value.videoValue = false; 
        } else { 
         value.videoValue = true; 
        } 
       }); 
       this.noticias = noticias; 
       this.pagination.current_page = response.data.current_page - 1; 
       this.pagination.per_page = response.data.per_page; 
       this.pagination.total = response.data.total; 
      }); 
     }, 
     searchByTagPagination(tag){ 
      this.showPagination = true; // para mostrar a paginação 
      Vue.http.get('searchByTag/' + tag + '?page=' + this.pagination.current_page).then((response) => { 
       this.noticias = response.data.data; 
       this.pagination.current_page = response.data.current_page - 1; 
       this.pagination.per_page = response.data.per_page; 
       this.pagination.total = response.data.total; 
      }); 
     }, 
     pair(index){ 
      if (index % 2 == 0) { 
       return true; 
      } else { 
       return false; 
      } 
     }, 
     impar(index){ 
      if (index % 2 == 0) { 
       return false; 
      } else { 
       return true; 
      } 
     }, 
     openModal(id){ 
      alert(); 
      $(`#modal-video-id`).modal('open'); 

     }, 
     getVideoId(url){ 
      this.videoId = this.$youtube.getIdFromURL(url); 
     } 

    }, 
    events: { 
     'pagination::changed'(page){ 
      this.searchByTagPagination(this.currentTag); 
     } 
    }, 
} 

Answer 1

這是一個沒有去：

<div id="modal-{{noticia.id}}"... 

你不能在屬性中使用鬍髭般的sintax，它只能在div {{noticia.id}}中使用。我建議使用vue的一切或jquery的一切，混合這個東西了它的複雜。

如果模式有CSS來顯示所有的時間，這將工作

在HTML：

<div class="modal" v-if="noticia.showModal === true"> 

在javascript：

openModal(id){ 
     this.noticias[id].showModal = true; 
    },