javascript - Vue 的 @click 功能在 Firefox 中不起作用，但在 Edge、Chrome 中起作用

问题描述

const main = new Vue({
    el: '#main',
    data: {
        result: "",
        responseAvailable: false,
        currentOpen: null
    },
    methods: {

        fetchData: function(event) {
            
            this.responseAvailable = false;

            fetch("https://restapihost.net/cms", {
                "method": "GET",
                "headers": {
                    "Content-Type": 'application/json',
                    'Authorization': 'Basic cmsdfkKKMNijiweeuiVzdGFwaTpyZXN0YXBp'
                }
            })
            .then(response => { 
                if(response.ok){
                    return response.json()    
                } else{
                    alert("Server returned " + response.status + " : " + response.statusText);
                }                
            })
            .then(response => {
                this.result = response.data; 
                this.responseAvailable = true;
            })
            .catch(err => {
                console.log(err);
            }); 
        }

    }
});

button {
    margin-bottom: 1rem;
}

.content {
  
}

.hide {
  display: none;
}
.show { 
display:block;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Responsive + Encoding Meta Tag -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Stylesheet -->
    <link href = "styles.css" rel = "stylesheet">
    <!-- Title -->
    <title>API Call</title>
</head>
<body>
    <div id="main">
        <h1>API Call Example</h1>
        <button @click="fetchData">Get Index</button>
        <div v-if="responseAvailable == true" >
            <div name="list">
                <div v-for="i in result" class="elem">
                        <p :data-id="i.id" @click="currentOpen=i.id"><i>{{i.title}} </i></p>
                       <div v-bind:class="{'hide':true, 'show':(i.id === currentOpen)}" v-bind:id="i.id" v-html="i.content"></div>
                </div>
            </div>
        </div>
    </div>
</body>
<!-- Vue and Custom JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src = "scripts.js"></script>
</html>

按钮上的@click 功能（获取索引）在 Firefox 中不起作用。我尝试过其他浏览器，例如 Chrome 等。它们都可以正常工作。Firefox 什么都不做。我已经测试了@click="fetchData"、@click="fetchData(event)"、@click.native="fetchData" 没有任何效果。

谁能解释我的 POS 有什么问题？

标签： javascripthtmlcssvue.jsvuejs2

javascript - Vue 的 @click 功能在 Firefox 中不起作用，但在 Edge、Chrome 中起作用

问题描述

解决方案

推荐阅读