How to show list of city in select form from api larvel vuejs? i want to get the dropdown of city form api where i want to select city and its value will be id
I'd highly recommend vue-select - it makes it easy to take care of any of the select input options for you:
<template>
<v-select :options="cities" v-model="city" ></v-select>
</template>
<script>
import vSelect from 'vue-select';
export default {
components: {vSelect},
data() {
return {
cities: [],
city: null,
};
},
mounted() {
axios.get('/api/cities').then(res => {
this.cities = _.map(res.data, function (city) {
return {value: city.id, label: city.name};
});
});
},
};
</script>
@BURLRESEARCH - should i have to install vue-select or its default vuejs
@BURLRESEARCH - i am getting error on this line
_this.cities = _.map(response.data, function (city) {
That's lodash stuff - normally lodash is installed in Laravel by default in bootstrap.js. If you don't want to be running Lodash, you could switch the map out and use forEach instead.
Ya - you'll have to install vue-select if you choose to use that, it's not core vue, it's an NPM installed library for use with Vue.
Please sign in or create an account to participate in this conversation.