it doesn't rendering about Axios resullt, please

user_17540655 0
Viewed 39

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~~

mutation vue.js rendering render javascript
1 Answers

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

user_174047050
Related