Блог

Как я могу получить доступ к глобальным переменным внутри компонента VueJS?

Я пытаюсь получить доступ к url переменной в функции выборки внутри methods , но это не сработает.

 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">$amp;</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 });
    }
})

  

В коде, который вы вставили первым делом, происходит несколько ошибок:

функция выборки — это своего рода вызов другой функции, которую, похоже, вы хотели импортировать в первую очередь? в любом случае этот вызов должен быть в первую очередь внутри его собственной оболочки функции, например:

     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">$amp;</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 });
        }
    }
})
  

Во-вторых, я не вижу, где вы хотите вызвать выборку, судя по тому, как вы пытаетесь обработать ошибку, похоже, вы хотите, чтобы выборка информации выполнялась в функции displayProducts, когда вы щелкаете где-нибудь в своем шаблоне, тогда URL-адрес должен быть параметром, переданным там, я уверен, что это не то, что вам нужноищу, но вам нужно будет предоставить фрагмент вашей проблемы для работы, но я уверен, что указываю вам правильное направление.