laravel 5.8 中的 Vue，从 axios 响应动态填充表答案

【问题标题】：Vue in laravel 5.8, populate table dynamically from axios responselaravel 5.8 中的 Vue，从 axios 响应动态填充表
【发布时间】：2020-10-22 06:13:28
【问题描述】：

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.

刀片在这里：

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

当我检查页面元素时，没有表体或数据行。

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

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 调用时返回并且格式正确，但我只需要弄清楚为什么我的表没有动态填充

【问题讨论】：

标签： vue.js laravel-5.8

【解决方案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]);
     }
    }
})

【讨论】：

那不起作用，它说 this.$set 不是函数
对不起，我忘了箭头功能。已添加修复请重试
啊，对。谢谢你得到了结果，但是，它只做了一行，而不是我回到数组中的 33 行。它只显示一行是有原因的吗？
我在这一行做了修复 this.$set(this.buildsList, key, data[key]);请再检查一次我的答案