Question

我在Vue.js中有一个组件，我在其中创建动态模态，但我无法打开它们，我认为我正在做的一切正确，因为我们调用函数并且它响应alert（），但它确实不要打开模态

<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一直显示，这将起作用

in html：

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

在javascript中：

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

动态模态（materialize.css）不能用Vue，js打开

1 个答案: