Reusable Vue Components - How to use props to define v-for array and path for unique Axios responses - vue.js

Question

I'm using Vue components for multiple inputs with different axios url's and responses. Then using a v-for loop for the response to be displayed which can be selected.
idea:
Input 1 > Axios GET user data
Input 2 > Axios GET colour data
Input 3 > Axios GET model data
etc, each Axios response can have a different response array and objects.
I can set the different Axios GET url's by using props, but how can I use props to define the v-for array path and object path?
example image sample showing needed link between prop and v-for:
Can I use props to define the array path and object in the f-vor loop? In the example code below I need to use the prop from the component to define the array and object paths. note I'm using a axios sample response for this demo.
Vue.component("my-component", {
template: `
<div style="position:absolute"><input :placeholder="this.input_placeholder" #keyup="if(input_value.length > 2 ){ search() }" v-on:blur="input_clear()" v-model="input_value" /><i v-if="loading_spinner" class="fas fa-spinner fa-pulse"></i><div class="supplier_select_popup" v-if="response_popup_show"><div v-for="data,i in response_array.bpi" v-on:click="response_select(i)">{{ data.code }}</div></div></div>`,
props: {
api_url: "",
api_response_path: "",
data_path: "",
},
data: function() {
return {
input_placeholder: "Search",
input_value: "",
selected_value: "",
loading_spinner: false,
response_popup_show: false,
response_array: [],
};
},
methods: {
// Fetch Data
search: function() {
this.response_popup_show = false
this.loading_spinner = true
clearTimeout(this.myVar)
this.myVar = setTimeout(
function() {
axios
.get(
this.api_url
)
.then((response) => {
this.response_array = response.data
console.log(this.response_array)
this.response_popup_show = true
this.loading_spinner = false
})
.catch((error) => {
console.log(error)
this.errored = true;
this.response_popup_show = false
})
.finally(() => (this.loading = false))
}.bind(this),
1000
);
},
// Response Select
response_select: function(i) {
this.input_value = [i]
this.selected_value = [i]
this.response_popup_show = false
},
// Response Clear
input_clear: function() {
var self = this;
setTimeout(function() {
self.response_popup_show = false
self.loading_spinner = false
if (self.selected_value.length != 0) {
self.input_value = self.selected_value
} else {
self.input_value = ""
}
}, 100);
}
}
});
const App = new Vue({
el: "#app",
methods: {}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://kit.fontawesome.com/17cdac82ba.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<my-component class="clickable" api_url="https://api.coindesk.com/v1/bpi/currentprice.json" api_response_path="response_array.bpi" data_path="date.code">
</my-component>
</div>

Answer 1

Yes, you can do this by passing the property you want to use for both the API response and each data item, but I prefer to generalize it by passing "map" functions, that way you aren't limited in any way by how you want to transform the data:
props: [
'map_response',
'map_data',
]
<div v-for="data, i in map_response(responseArray)">
{{ map_data(data) }}
</div>
You pass the props like this:
<my-component
class="clickable"
api_url="http://api.example.com/stuff"
:map_response="response => response.bpi"
:map_data="data => data.code"
>