After vue acquires the interface data array data, it uses the array subscript assignment problem.

problem description:

data

data() {
      return {
        // 1
        floor1:[]
        }
       }
created

this.axios.get("https://easy-mock.com/mock/5b559f6f4ff1f856c44c67ec/index")
      .then(response=> {
        console.log(response);
         if(response.status==200){
           //1
            this.floor1 = response.data.data.floor1
            })
html 

    <div class="floor-anomaly">
        <div class="floor-one"><img :src="floor1[0].image" width="100%" /></div>
    </div>

this is an error message. That"s why you can"t use the subscript value

.
Mar.29,2021

because the floor1 is an empty array when rendering dom for the first time, and floor1 [0] .image cannot be accessed, so you will naturally make an error. You can add a v-if


.

Yes, it's a matter of rendering speed. When
comes in, html renders first. Floor1= [], floor1 [0] .image is undefined. For this solution, you can do this

.
<div class="floor-anomaly">
        <div class="floor-one" v-if="floor1[0]"><img :src="floor1[0].image" width="100%" /></div>
    </div>

if there are too many values, it is recommended to define these empty fields in data, such as

.
floor1:[{image:'',contenf:''}...]
Menu