Javascript Vuejs在下拉列表中的“数组”下获取数组

我有这样的数据

问题 我无法访问我的

数据下的
管
数组

代码

脚本

data() {
    return {
        types: []
    }
},
methods: {
    handleChange (val) {
        axios.get(`/api/admin/getFromTubes/${val}`)
        .then(res => {
            this.types = res.data.data.tubes;
        })
        .catch(error => {
            console.log(error);
        })
    }
}

模板

<el-form-item label="Old Core">
    <el-select style="width: 100%;" filterable clearable v-model="form.old_core_id" placeholder="Select Old Core">
        <el-option
        v-for="cable in types"
        :key="cable.id"
        :label="cable.name"
        :value="cable.id">
            <span style="float: left">
                {{ cable.name }}
            </span>
        </el-option>
    </el-select>
</el-form-item>

{{cable.name}

问题: 如何在模板选择（下拉列表）中获取我的

管
数组？
不应该是：

handleChange（val）{
get（`/api/admin/getFromTubes/${val}`）
。然后（res=>{
this.types=res.data[0]。管；
})
.catch（错误=>{
console.log（错误）；
})
}

或者实际上

this.types = res.data.data[0].tubes;

难道不是：

handleChange（val）{
get（`/api/admin/getFromTubes/${val}`）
。然后（res=>{
this.types=res.data[0]。管；
})
.catch（错误=>{
console.log（错误）；
})
}

或者实际上

this.types = res.data.data[0].tubes;