如何在 VueJS 組件中使用全局變量

Question

如何訪問 vueJS 組件內的全局變量？

我正在嘗試訪問methods內 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 });
    }
})

Answer 1

您首先粘貼的代碼中有多個問題：

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 });
        }
    }
})

其次，我沒有看到您想通過嘗試處理錯誤的方式調用 fetch 的方式，看起來您希望在單擊模板中的某個位置時在 displayProducts 函數上完成信息的獲取，那么 url 應該是傳遞的參數我確定這不是您正在尋找的答案，但您需要提供您的問題的片段才能解決，但我確信我為您指明了正確的方向。