CODEWITHSUNDEEP
javascriptvue.jsvuejs2shopifyshopify-template
trevdev
trevdev

Reputation: 341

VueJS Ignore InnerHTML

Heya

I have a weird use-case (Shopify) scenario. I want to wrap a Shopify section in a stateful Vue wrapper. The wrapped content is a bit buggy but for the most part works. The wrapper is responding to the vuex bindings and showing/hiding the innerHTML as required.

However, I'm still seeing this warning in my Console:

[Vue warn]: Error compiling template:

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.

239|          </a>
240|        </h2>
241|        <style>
   |        ^^^^^^^

My confidence is a bit shaken by the console warning and I'm hoping to rule out Vue as a source of some of the challenges I'm having with the wrapped content.

I'm also wondering if there's a supported/proper way to tell Vue.JS to ignore the innerHTML of a given element and just let the browser do its thing.

For good measure here's an example of what I'm doing:

Page Template:

<article class="site-page" data-template-page>
  <div id="pool-covers" class="page-content"> <-- mounting point
    <covers-app>
      {% section 'pool_covers-data' %} <-- another vue component in a different section.

      <featured-collection> <-- stateful wrapper
        {% section 'dynamic-featured-collection' %} <-- content I want ignored by VueJS
      </featured-collection>
    </covers-app>
  </div>
</article>


{{ 'covers.app.js' | asset_url | script_tag }} <-- Webpack bundle

FeaturedCollection.vue:

<template>
  <div>
    <div v-show="step == 7">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: "featured-collection",
  computed: {
    ...mapState(['step'])
  }
}
</script>

<style>
</style>

Upvotes: 0

Views: 792

Answers (1)

mandaputtra
mandaputtra

Reputation: 1070

Try using v-pre on the slot. So it wont be compiled.

Upvotes: 2

Related Questions