How to create global vue variables in html and make it readable on .md files? #1252

Activity

1. jhildenbiddle commented on Oct 8, 2020

   

   jhildenbiddle

   on Oct 8, 2020

   Member

   More actions

   Addressed in #1271. Waiting on review and merge. Keep an eye on #752 as well.
2. jhildenbiddle

   linked a pull request that will close this issueFix Vue Reactivity #1271on Oct 8, 2020
3. jhildenbiddle

   closed this as completedin #1271on Oct 8, 2020
4. jhildenbiddle

   added

   vuejsrelated to Vue.jsrelated to Vue.js

   question

   bugconfirmed as a bugconfirmed as a bug

   on Oct 8, 2020
5. jhildenbiddle commented on Oct 8, 2020

   

   jhildenbiddle

   on Oct 8, 2020

   Member

   More actions

   @fmcdigital --

   Fixed in #1271. Note that if you intent to use raw HTML as data, you will need to use the v-html directive:

   # Text Data
   
   ## {{ appName }}
   
   - {{ fullImg }}
   - {{ mobileImg }}
   - {{ squareImg }}
   
   <script>
     new Vue({
       el: '#main',
       data: {
         appName: $docsify.name,
         fullImg: '1.920 x 1.080 px. Formato: .jpg com 72 dpi',
         mobileImg: '1.080 x 1.920 px. Formato: .jpg com 72 dpi',
         squareImg: '1.200 x 1.200 px. Formato: jpg com 72 dpi'
       }
     })
   </script>

   # Raw HTML DAta
   
   ## <span v-html="appName"></span>
   
   - <span v-html="fullImg"></span>
   - <span v-html="mobileImg"></span>
   - <span v-html="squareImg"></span>
   
   <script>
     new Vue({
       el: '#main',
       data: {
         appName: '<b>' + $docsify.name + '</b>',
         fullImg: '<b>1.920 x 1.080 px</b>. Formato: <b>.jpg</b> com <b>72 dpi</b>',
         mobileImg: '<b>1.080 x 1.920 px</b>. Formato: <b>.jpg</b> com <b>72 dpi</b>',
         squareImg: '<b>1.200 x 1.200 px</b>. Formato: <b>jpg</b> com <b>72 dpi</b>'
       }
     })
   </script>