我在Laravel 8/vuejs 2/bootstrap 4中添加了v-select，但选择下拉框输入为空。我定义了2个v-select元素
<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() {
在浏览器中我看到:https://i.stack.imgur.com/7Hf7u.jpg
为什么会这样?如何修复?
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:
我从项目中删除了bootstrap- value，并制作了单独的页面，选择输入。它包含:
<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>
查看浏览器控制台返回的数据(我输出数组和任何行)观察者类包装器让我很困惑，但我不确定是什么原因。
在服务器上，我返回数组在laravel 8控件:
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);
}
请查看live page:
https://streamgeeks-rebranded-dev.cloudns.cl/test2
修改块:这是一个由其他开发人员用bootstrap-vue/vuejs2和jquery启动的项目很多jquery库都是在前端初始化代码。使用页面时，我删除了所有的bootstrap-vue/jquery代码。现在我已经删除了所有的jquery代码，除了行:
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
在文件资源/js/bootstrap.js。但我需要他们作为项目是基于bootstrap。
这可能不是css的问题，因为我没有看到所有现有的项目。在这种情况下，我将在浏览器控制台中看到它们。与其他库冲突?我展示包裹。json。
谢谢!
从console.log来看，数据似乎很好。不要被控制台的任何__ob__内容分散注意力。Vue反应性正常
当我检查你的示例站点时，一切似乎都很好- Vue开发工具显示:options绑定很好。
我的理论是，这不是数据或v-select(错误)配置的问题(有一个错误，但不显著-v-select没有code道具)，而是与冲突的CSS问题(可能是因为JQuery，但很难说肯定)
参见下面的示例....一切正常
Vue.component('v-select', VueSelect.VueSelect);
const vm = new Vue({
el: '#app',
data() {
return {
categorySelectionItems: [{
"code": 1,
"label": "Broadcast"
}, {
"code": 2,
"label": "Classroom"
}, {
"code": 3,
"label": "Collaboration"
}, {
"code": 5,
"label": "Entertainment"
}, {
"code": 4,
"label": "Esports"
}, {
"code": 6,
"label": "Experimental"
}, {
"code": 7,
"label": "Marketing"
}, {
"code": 8,
"label": "Music"
}, {
"code": 12,
"label": "Other"
}, {
"code": 9,
"label": "Radio"
}, {
"code": 10,
"label": "Venue"
}, {
"code": 11,
"label": "Worship"
}],
selection_category_id: null,
platforms: [{
label: 'Canada',
code: 'ca'
}],
selection_platform_id: null,
};
},
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script>
<!-- use the latest vue-select release -->
<script src="https://unpkg.com/vue-select@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">
<div id="app">
<div>
<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" label="label" :options="categorySelectionItems" class="form-control" placeholder="Select option"></v-select>
</div>
<pre>selection_category_id: {{ selection_category_id }}</pre>
</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" :options="platforms" class="form-control" placeholder="Select option"></v-select>
</div>
<pre>selection_platform_id: {{ selection_platform_id }}</pre>
</div>
</div>
</div>
</div>这是一个css问题，在类中删除。select-container属性
overflow: hidden;
修复问题