laravel 5.8 中的 Vue，根据 axios 响应动态填充 table

Question

I have a blade where I'm using a multiselect as dropdown, and when a selection is chosen it fires off an axios call which returns a json_encoded data set.

blade 在这里：

<div class="uk-width-1-2">
    <multiselect
            label="name"
            track-by="value"
            v-model="CategoryValue"
            :options="CategoryOptions"
            :multiple="false"
            :taggable="true"
            @tag="getItems"
            @input="getItems"
            @search-change="val => read(val)"
            :preselect-first="false"
            :close-on-select="true" 
            :preserve-search="true" 
            placeholder="Choose Category..."
          ></multiselect>

    <div style="border:1px solid black; height:80%; margin-top:15px;">
        <table>
            <thead>
                <tr>
                    <th>Text</th>
                </tr>
            </thead>
            <tbody v-for="build in buildsList">
                <tr>
                    <td>@{{ build.build_code_formatted }}</td>
                </tr>
            </tbody>
            
        </table>
    </div>
</div>


new Vue({

  data() {
    return{
       
        buildsList: {},
    }

  },
  methods: {
    
    getItems() {
      
      console.log(this.CategoryValue.value);

      axios.post('/getItems',{
            
        categoryCode: this.CategoryValue.value,

      })
      .then(function (response){
            
        this.buildsList = response.data;
            
      })
      .catch(function (error) {
            console.log(error);
            
      });
    }
  }
})

回调后我得到了 200，它确实记录了 buildsList，所以我知道它正在正确返回我的所有数据。但是，当我在控制台中取回数据时，它不会填充 html.

当我检查页面元素时，没有 table 正文或数据行。

另外，我的控制器正在返回这个：

unction getItems(Request $request){

    return json_encode($this->itemService->getItems($request->Code));
}

itemService 正在这样做：

$results = $pdoStatement->fetchAll();
    foreach ($results as &$r)
        $r = (object) $r;
    return $results;

所以我的数据在 axios 调用时返回并且格式正确，但我只需要弄清楚为什么我的 table 没有动态填充

Answer 1

请尝试更改此部分

this.buildsList = response.data;

至

.then((response) => {
    let data = response.data;

    for (let key in data) {
    if(data.hasOwnProperty(key)) {
       this.$set(this.buildsList, key, data[key]);
     }
    }
})

laravel 5.8 中的 Vue，根据 axios 响应动态填充 table

Vue in laravel 5.8, populate table dynamically from axios response

vue.js

laravel-5.8