i use vue 3, SshPre for line color
<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>
in store.js
// in .vue file
...mapMutations({
setDecodeData : 'git/setDecodeData',
}),
// in store.js
setDecodeData(state, data){
state.decodeData = data
},
setdata functions
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))))
},
so div.fileContent in ssh-pre tags doesn't live rendering
but this tag can takes live render
<pre>{{this.$store.state.git.decodeData}}</pre>
how can i fix it?? please help me~~
In template you don't need to use $this remove that. And use mapGetters from vuex if you want to have reactivity with store in your template. Set up getters in your store and access that in your computed which will watch for any changes and update the dom.
In store:
const getters = {
getDecodeData: (state) => state.decodeData
}
In layout:
computed: {
...mapGetters([
getDecodeData
])
}
<pre>{{getDecodeData}}</pre>
For reference you can read from here: https://vuex.vuejs.org/guide/getters.html#method-style-access