uso vue 3, SshPre para el color de línea
<div class="fileContent" > <!-- <ssh-pre language="js" copy-button @copied="onCopiedDoSomething" label="Javascript" dark=true><pre>{{this.$store.state.git.decodeData}}</pre></ssh-pre> --> <ssh-pre language="js" copy-button label="Javascript" dark=true > <pre>{{this.$store.state.git.decodeData}}</pre></ssh-pre> </div>en tienda.js
// in .vue file ...mapMutations({ setDecodeData : 'git/setDecodeData', }), // in store.js setDecodeData(state, data){ state.decodeData = data },establecer funciones de datos
sendContent(e){ this.axios.get(`${e.url}`, { headers : { Authorization : `token ${key}` } }) .then( res => { console.log(res) this.encodedData = res.data.content this.decodeData() }) }, decodeData(){ this.setDecodeData( decodeURIComponent(escape(window.atob(this.encodedData)))) },entonces div.fileContent en las etiquetas ssh-pre no se procesa en vivo
pero esta etiqueta puede tomar renderizado en vivo
<pre>{{this.$store.state.git.decodeData}}</pre>¿¿Cómo puedo arreglarlo?? por favor ayúdame~~
En la plantilla, no necesita usar $ esto, elimine eso. Y use mapGetters de vuex si desea tener reactividad con la tienda en su plantilla. Configure getters en su tienda y acceda a eso en su computador, que observará cualquier cambio y actualizará el dom.
En el almacén:
const getters = { getDecodeData: (state) => state.decodeData }En el diseño:
computed: { ...mapGetters([ getDecodeData ]) } <pre>{{getDecodeData}}</pre>Como referencia, puede leer desde aquí: https://vuex.vuejs.org/guide/getters.html#method-style-access