I added v-select in Laravel 8 /vuejs 2/ bootstrap 4, but selection dropdowns inputs are empty. I define 2 v-select elements
<div class="row">
<div class="form-group col-md-6">
<label>Select category</label>
<div class="select-container">
<v-select
v-model="selection_category_id"
code="code"
label="label"
:options="categorySelectionItems"
class="form-control"
placeholder="Select option"
></v-select>
</div>
</div>
</div>
<div class="form-group col-md-6">
<label>Platform</label>
<div class="select-container">
<div class="select-container">
<v-select
v-model="selection_platform_id"
label="label"
code="code"
:options="platforms"
class="form-control"
placeholder="Select option"
></v-select>
</div>
</div>
</div>
add v-select to the page :
import Vue from 'vue'
import vSelect from 'vue-select'
Vue.component('v-select', vSelect)
import 'vue-select/dist/vue-select.css';
data() {
return {
categorySelectionItems: [], // these data are read from db
selection_category_id: null,
platforms: [{label: 'Canada', code: 'ca'}], // define constant array for example
selection_platform_id: null,
async loadCategoriesList() {
const result = await this.callApi(
'post',
window.api_path + 'getCategoriesList', // READ data from db by request
{mode: 'selection'}
);
if (result.status != 200) {
this.$toaster.error(result.data.message);
this.categories = [];
return;
}
this.categorySelectionItems = result.data.categories;
}, // async loadCategoriesList() {
and in the browser I see : https://i.stack.imgur.com/7Hf7u.jpg
Why so and how it can be fixed ?
package.json:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.21",
"bootstrap": "^4.6.0",
"jquery": "^3.4.1",
"laravel-echo": "^1.11.0",
"laravel-mix": "^6.0.25",
"lodash": "^4.17.19",
"popper.js": "^1.12",
"postcss": "^8.3.1",
"pusher-js": "^7.0.3",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"vue": "^2.6.12",
"vue-loader": "^15.9.5",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.3",
"@johmun/vue-tags-input": "^2.1.0",
"bootstrap-vue": "^2.21.2",
"ckeditor4-vue": "^1.3.0",
"moment": "^2.29.1",
"moment-timezone": "^0.5.33",
"secure-ls": "^1.2.6",
"simplebar": "^5.3.0",
"v-toaster": "^1.0.3",
"vee-validate": "^3.4.8",
"vue-beautiful-chat": "^2.5.0",
"vue-facebook-login-component": "^3.0.0",
"vue-fragment": "1.5.2",
"vue-froala-wysiwyg": "^3.2.6-1",
"vue-google-login": "^2.0.5",
"vue-js-modal": "^2.0.0-rc.6",
"vue-loading-overlay": "^3.4.2",
"vue-plyr": "^7.0.0",
"vue-router": "^3.4.9",
"vue-select": "^3.12.2",
"vue-upload-component": "^2.8.22",
"vue-upload-multiple-image": "^1.1.6",
"vuejs-paginate": "^2.1.0",
"vuescroll": "^4.17.3",
"vuex": "^3.6.2",
"vuex-persistedstate": "^4.0.0"
},
"browser": {
"crypto": false,
"stream": false
}
}
MODIFIED BLOCK :
I removed bootstrap-vue from the project, and made separate page with select inputs. It contains :
<template>
<div>
<div class="row">
<div>{{ categorySelectionItems }}</div>
<div class="form-group col-md-6">
<label>Select category</label>
<div class="select-container">
<v-select
v-model="selection_category_id"
code="code"
label="label"
:options="categorySelectionItems"
class="form-control"
placeholder="Select option"
></v-select>
</div>
</div>
</div>
<div class="form-group col-md-6">
<div>{{ platforms }}</div>
<label>Platform</label>
<div class="select-container">
<div class="select-container">
<v-select
v-model="selection_platform_id"
label="label"
code="code"
:options="platforms"
class="form-control"
placeholder="Select option"
></v-select>
</div>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import vSelect from 'vue-select'
Vue.component('v-select', vSelect)
import 'vue-select/dist/vue-select.css';
export default {
name: "ProjectAdd",
components: {
},
data() {
return {
categorySelectionItems: [],
selection_category_id: null,
platforms: [{label: 'Canada', code: 'ca'}],
selection_platform_id: null,
};
},
created() {
document.title = this.$route.meta.title;
},
mounted() {
this.loadCategoriesList();
}, // mounted() {
methods: {
async loadCategoriesList() {
console.log(' loadCategoriesList:')
const result = await this.callApi(
'post',
window.api_path + 'getCategoriesList',
{mode: 'selection'}
);
if (result.status != 200) {
this.$toaster.error(result.data.message);
this.categories = [];
return;
}
console.log('result.data::')
console.log(result.data)
this.categorySelectionItems = result.data.categories;
console.log('this.categorySelectionItems::')
console.log(typeof this.categorySelectionItems)
console.log(this.categorySelectionItems)
console.log(JSON.parse(JSON.stringify(this.categorySelectionItems)))
console.log('======================')
for (var i= 0; i< this.categorySelectionItems.length; i++) {
console.log('this.categorySelectionItems[i]::')
console.log(this.categorySelectionItems[i])
console.log(JSON.parse(JSON.stringify(this.categorySelectionItems[i])))
console.log(typeof this.categorySelectionItems[i])
console.log('--')
}
}, // async loadCategoriesList() {
},
computed: {
}
};
</script>
Looking at browsers console at returned data (I make output of array and any row) Observer class wrapper confuse me a lot, but I am not sure what is the reason.
On server I return array in laravel 8 control :
public function getCategoriesList(Request $request)
{
$mode = $request->mode;
$categories = Category
::orderBy('title', 'asc')
->get()
->map(function ($category) use($mode) {
return $mode == 'selection' ? [ 'code' => $category->id, 'label' => $category->title ] : $category;
});
// ->toArray(); // If to uncomment it - the same results!
return response()->json(['categories' => $categories], HTTP_RESPONSE_OK);
}
Please take a look at live page :
https://streamgeeks-rebranded-dev.cloudns.cl/test2
MODIFIED BLOCK: That was a project started by other developer with bootstrap-vue/vuejs2 and jquery and quite a lot of jquery libraries init code on frontend. Working with pages I removed all bootstrap-vue/jquery code. Now I have removed all jquery code excluding lines :
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
in file resources/js/bootstrap.js. But I need them as project is based on bootstrap.
It can not be a problem with css as I do not see all existing items. In this case I would see them in browsers console. Conflicts with other libraries? I show package.json above.
Thanks!
