为什么 d v-select selection 下拉列表输入为空？
Why d v-select selection dropdowns inputs are empty?
我在 Laravel 8 /vuejs 2/ bootstrap 4 中添加了 v-select，但是 selection 下拉列表输入为空。
我定义了 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>
添加v-select到页面:
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://imgur.com/a/DND9w7U
为什么会这样以及如何解决？
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
}
}
修改块：
我从项目中删除了 bootstrap-vue，
并制作了带有 select 输入的单独页面。
它包含：
<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>
查看 returned 数据的浏览器控制台（我输出数组和任何行）Observer class wrapper 让我很困惑，
但是不知道是什么原因。
在服务器上 I return 数组在 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);
}
请看直播页面:
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');
在文件 resources/js/bootstrap.js 中。但我需要它们，因为项目基于 bootstrap.
css 不会有问题，因为我没有看到所有现有项目。
在这种情况下，我会在浏览器控制台中看到它们。
与其他库冲突？我在上面显示package.json。
谢谢！
从console.log看来数据还不错。不要被控制台中的任何 __ob__ 内容分散注意力。这是normal Vue reactivity
当我检查您的示例站点时，一切似乎都很好 - Vue Dev 工具显示 :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 问题并在 class 中移除。select-容器 属性
overflow: hidden;
解决了问题
我在 Laravel 8 /vuejs 2/ bootstrap 4 中添加了 v-select，但是 selection 下拉列表输入为空。 我定义了 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>
添加v-select到页面:
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://imgur.com/a/DND9w7U
为什么会这样以及如何解决？
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
}
}
修改块：
我从项目中删除了 bootstrap-vue， 并制作了带有 select 输入的单独页面。 它包含：
<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>
查看 returned 数据的浏览器控制台（我输出数组和任何行）Observer class wrapper 让我很困惑， 但是不知道是什么原因。
在服务器上 I return 数组在 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);
}
请看直播页面:
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');
在文件 resources/js/bootstrap.js 中。但我需要它们，因为项目基于 bootstrap.
css 不会有问题，因为我没有看到所有现有项目。 在这种情况下，我会在浏览器控制台中看到它们。 与其他库冲突？我在上面显示package.json。
谢谢！
从console.log看来数据还不错。不要被控制台中的任何 __ob__ 内容分散注意力。这是normal Vue reactivity
当我检查您的示例站点时，一切似乎都很好 - Vue Dev 工具显示 :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 问题并在 class 中移除。select-容器 属性
overflow: hidden;
解决了问题