Estoy usando vue en Shopify y estoy trabajando en una página de colección. Cuando hago clic en un filtro, es un href y actualiza la URL y vuelve a cargar la página.
Entonces tengo una grilla de productos
<div class="grid-wrapper"> <template v-for="(product, index) in collection.products"> <div class="product-item"></div> </template> </div>Y mi idea era simplemente usar la misma URL con fetch para que la página no se recargara.
hice esto
fetch('/collections?variant=black') .then(res => res.text()) .then(html => new DOMParser().parseFromText(html, 'text, html')) .then(data => { document.querySelector('.grid-wrapper').innerHTML = data.querySelector('.grid-wrapper').innerHTML }) Esto no funciona porque obtengo la <template v-for…> real como el nuevo innerHTML y vue no se hace cargo. Como puedo resolver esto
En Shopify convertí el objeto así.
const collection = (() => { const collection = {{ collection | json }} const products = {{ collection.products | json }} collection.products = products return collection })();Luego, en mi instancia de vue
new Vue.createApp({ data() { collection: collection } }).mount('#app')Está abordando esto en la forma tradicional de JavaScript de manipular el DOM directamente. En Vue, establecemos el estado que luego puede representar su plantilla.
En cambio:
data para almacenar su estadomethods , escriba una función para obtener sus datos, luego actualice los data los componentescreated ganchotemplate renderiza los resultadosv-ifv-for para iterar y renderizar listasAquí hay una demostración de trabajo
No tengo acceso a su punto final de API, por lo que para fines de demostración, solo estoy usando la API de GitHub para obtener y representar una lista de todos los repositorios en la organización Vue.js.
Esto es lo que parece:
Vue.config.devtools = false; Vue.config.productionTip = false; new Vue({ el: '#app', name: 'dbzx10299-demo', data() { return { loaded: false, response: null, } }, methods: { fetchData() { const demoEndpoint = 'https://api.github.com/orgs/vuejs/repos'; fetch(demoEndpoint) .then(response => response.json()) .then(data => { this.response = data; this.loaded = true; }) }, }, mounted() { this.fetchData(); }, }) <script src="https://unpkg.com/vue@2.x/dist/vue.js"></script> <div id="app"> <div class="hello"> <h2>Vue Repo List - Data fetching example</h2> <div v-if="!loaded">Loading...</div> <ul v-else> <li v-for="(repo, index) in response" :key="index"> <a :href="repo.html_url" :title="repo.description" target="_blank"> {{ repo.name }} </a> <i>★ {{ repo.stargazers_count }}</i> </li> </ul> </div> </div>