The Methods method in the Vue component updates the data on how to re-render the component.

in the Vue component, the value in the object returned by Data is modified by the method in Methods, but the whole page is not re-rendered according to the modified value

export default {
data () {

let page = this.$attrs["page"]
let pageSize = this.$attrs["pageSize"]
let dataBus = {
  newArticleData: [],
  page
}
console.log(page)
this.$a.get(`http://localhost:8081/api/article/page/${dataBus.page}/pageSize/${pageSize}`).then(res => {
  let json = res.data
  if (json.err === false) {
    dataBus.newArticleData = json.data[0]
  }
}, err => {
  console.log(err)
})

return dataBus

},
methods: {

addPage () {
  this.pagePP
  console.log(this.page)
}

}
}

Mar.04,2021

Shouldn't variables declared in

data be in return?
getting background data should be called in mounted.
personally, the structure of this code is a little messy

.
methods:{
    addPage(){
    this.pagePP;
    this.xxx()
    }
} 
After

page PP, call the method that depends on the page parameter

again.
// 
export default {
    data () {
        return {
            dataBus:{
                newArticleData: [],
                page: 0
            }
        }
    },
    created() {
        this.getData()
    },
    methods: {
        getData(){
            this.$a.get(`http://localhost:8081/api/article/page/${dataBus.page}/pageSize/${pageSize}`).then(res => {
              let json = res.data
              if (json.err === false) {
                this.dataBus.newArticleData = json.data[0]
              }
            }, err => {
              console.log(err)
            })
        }
    }
    //addPage

my friend suggests you take a look at watch

.
Menu