Javascript 如何在VueJS组件中使用全局变量

如何访问vueJS组件中的全局变量

我正在尝试访问

方法

内的fetch函数中的

url

变量，但它不起作用

var produits = [];
var url = '/dataset.json';

const vm = new Vue({
    el: "#app",
    data: {
        produits: []
    },
    methods: {
        handleKeyUp(event) {
            console.log(event.key);
            this.displayProducts()
        },
        displayProducts(produits) {
            const htmlString = produits
                .slice(0, 3)
                .map((produit) => {

                    var replace = searchBar.value;
                    var re = new RegExp(replace, "gi");

                    return `
                    <li class="produitWrapper">
                    <div class="imgProduit">
                        <img src="https://d1tydw6090df56.cloudfront.net/products/320x240/${produit.imageKeyHashes}.jpg" alt="">
                    </div>

                    <div class="infosProduit">
                        <h2>${produit.title} - </h2>
                        <h3>${produit.mpn.replace(re, `<span class="highlight">$&</span>`)}</h3>
                        <br>
                        <p>${produit.description}</p>
                    </div>
                </li>
            `;
                })
                .join("");

            productsList.innerHTML = htmlString;
        },
        fetch(url).then(res => res.json())
            .then((output) => {
                produits = output
            })
            .catch(err => { throw err });
    }
})

var produits=[]；
var url='/dataset.json'；
const vm=新的Vue({
el:“应用程序”，
数据：{
产品：[]
},
方法：{
handleKeyUp（事件）{
console.log（event.key）；
这是displayProducts（）
},
显示产品（产品）{
常量htmlString=产品
.slice（0,3）
.map（（produit）=>{
var replace=searchBar.value；
var re=新的RegExp（替换为“gi”）；
返回`

${produit.title}-
${produit.mpn.replace（re，`$&`）}


${produit.description}


`;
})
.加入（“”）；
productsList.innerHTML=htmlString；
},
fetch（url）.then（res=>res.json（））
。然后（（输出）=>{
产品=输出
})
.catch（err=>{throw err}）；
}
})

您首先粘贴的代码中有多处出错：

fetch函数是对另一个函数的调用，看起来您需要先导入它？无论如何，调用应该首先在他自己的函数包装器中，如下所示：

    import fetch from '@/api/fetch'

let produits = [];
const url = '/dataset.json';

const vm = new Vue({
    el: "#app",
    data: {
        produits: []
    },
    methods: {
        handleKeyUp(event) {
            console.log(event.key);
            this.displayProducts()
        },
        displayProducts(products) {
            const htmlString = products
                .slice(0, 3)
                .map((produit) => {

                    var replace = searchBar.value;
                    var re = new RegExp(replace, "gi");

                    return `
                    <li class="produitWrapper">
                    <div class="imgProduit">
                        <img src="https://d1tydw6090df56.cloudfront.net/products/320x240/${produit.imageKeyHashes}.jpg" alt="">
                    </div>

                    <div class="infosProduit">
                        <h2>${produit.title} - </h2>
                        <h3>${produit.mpn.replace(re, `<span class="highlight">$&</span>`)}</h3>
                        <br>
                        <p>${produit.description}</p>
                    </div>
                </li>
            `;
                })
                .join("");

            productsList.innerHTML = htmlString;
        },
        fetch(url) {
            fetch(url).then(res => res.json())
            .then((output) => {
                produits = output
            })
            .catch(err => { throw err });
        }
    }
})

import fetch from'@/api/fetch'
设produits=[]；
常量url='/dataset.json'；
const vm=新的Vue({
el:“应用程序”，
数据：{
产品：[]
},
方法：{
handleKeyUp（事件）{
console.log（event.key）；
这是displayProducts（）
},
显示产品（产品）{
const htmlString=产品
.slice（0,3）
.map（（produit）=>{
var replace=searchBar.value；
var re=新的RegExp（替换为“gi”）；
返回`

${produit.title}-
${produit.mpn.replace（re，`$&`）}


${produit.description}


`;
})
.加入（“”）；
productsList.innerHTML=htmlString；
},
获取（url）{
fetch（url）.then（res=>res.json（））
。然后（（输出）=>{
产品=输出
})
.catch（err=>{throw err}）；
}
}
})

---

第二，我看不出您希望通过处理错误的方式在何处调用fetch。看起来您希望在displayProducts函数上完成信息的获取，当您单击模板中的某个位置时，url应该是传递给那里的参数。我确信这不是您要寻找的答案，但您需要提供您要处理的问题片段，但我确信我为您指明了正确的方向。

哦，等等，fetch放错了位置，我很惊讶您没有收到关于此代码的各种错误（特别是语法错误）-检查浏览器开发工具控制台以了解错误