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

【问题标题】：Vue's @click function doesn't work in Firefox but works in Edge,ChromeVue 的 @click 功能在 Firefox 中不起作用，但在 Edge、Chrome 中起作用
【发布时间】：2020-10-20 20:12:29
【问题描述】：

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 出了什么问题？

【问题讨论】：

我在firefox上，示例运行良好
另外，请记住，在使用 vue 时不应该查询 DOM；应该使用vue数据
@DerekPollard 你的意思是 toogleElement 函数，还是？
是的，这就是我引用的方法
您必须提供一个minimal reproducible example，它实际上会在 Firefox 上重现该问题。您在此处发布的内容没有。作为一个疯狂的猜测，这可能是一个与 CSS 相关的问题，由于一些奇怪的 CSS 规则，仅在 FF 上，您的按钮与其他一些元素重叠，因此您实际上并没有点击它。没有办法复制，我们无能为力。另外，你没有提到你的 FF 版本，也没有提到你的操作系统或设备。

标签： javascript html css vue.js vuejs2

【解决方案1】：

发现问题。代码没问题，没有问题。 Firefox 已终止 JS-Engine。原因我不知道。

【讨论】：