my data goes like this:

{
   banner:[
     {"Bpic":"b1.jpg","spic":"s1.jpg"},
     {"Bpic":"b2.jpg","spic":"s2.jpg"},
     {"Bpic":"b3.jpg","spic":"s3.jpg"}
   ]
}

template:

that is, there is a picture component that binds the Bpic data of the p _ index item in the data

p_index (showing the number of image indexes) and pageData= {} are defined in data. The problem with
now is that the pageData is empty when the
page is loaded, so the binding of the code on the html will report an error, indicating that the pageData.banner is empty.
in fact, an asynchronous ajax request is invoked in mounted, and the resulting data pageData=res.data assignment. At this time, the bound data is refreshed to the page. Although the actual page is displayed normally, it is still very uncomfortable to report an error in initialization.
currently, I can only specify some data used for page binding when data defines pageData, such as:

data () {
      return {
         pageData: {"banner":[
             {"bpic":"","spic":""}
         ]},
        p_index :0
    }

although the problem is solved
, it always feels a little stupid. I wonder if there is any other more elegant way.