Vue.js Vuetify v-select不显示：项目
我想不出来。我正在使用Vuetify设置页面样式，由于某些原因，我无法获取要在我的Vue.js Vuetify v-select不显示：项目,vue.js,vuetify.js,Vue.js,Vuetify.js,我想不出来。我正在使用Vuetify设置页面样式，由于某些原因，我无法获取要在我的v-selectselect框中显示的数据。数据应该来自阵列市场。我认为这可能是版本问题，但我已经升级了所有内容，但仍然无法正常工作。。我不能让那该死的东西显示我的数据 以下是网页： <template> <v-container fluid grid-list-lg class="come_closer"> <v-layout row wrap>
v-select市场<template>
<v-container fluid grid-list-lg class="come_closer">
<v-layout row wrap>
<v-flex xs12>
<v-card class="lightpurple">
<v-card-title>
<v-icon class="my_dark_purple_text">language</v-icon>
<h1 class="title oswald my_dark_purple_text pl-2 pr-5">ENTER YOUR AMAZON CREDENTIALS BELOW</h1>
</v-card-title>
<v-form ref="form" v-model="valid">
<v-layout xs12 row wrap class="mx-auto">
<v-flex xs12>
<v-text-field
required
:error-messages="sellerIdErrors"
color="purple darken-3"
label="Amazon Seller Id"
v-model="seller_id"
prepend-icon="person"
@input="$v.seller_id.$touch()"
@blur="$v.seller_id.$touch()"
></v-text-field>
</v-flex>
<v-flex xs12>
<v-select
required
:items="marketplaces"
label="Select your Amazon Marketplace"
:error-messages="marketplaceErrors"
v-model="selected_marketplace"
color="purple darken-3"
prepend-icon="map"
@input="$v.selected_marketplace.$touch()"
@blur="$v.selected_marketplace.$touch()"
></v-select>
</v-flex>
<v-flex xs12>
<v-text-field
required
color="purple darken-3"
id="testing"
name="input-1"
label="Amazon Auth Token"
:error-messages="tokenErrors"
v-model="token"
prepend-icon="https"
@input="$v.token.$touch()"
@blur="$v.token.$touch()"
></v-text-field>
</v-flex>
<v-layout row wrap class="text-xs-center mx-auto" v-if="show_cancel_button">
<v-flex xs6>
<v-btn block large color="purple darken-3" dark @click="formCheckAndSend()">Update Your Credentials</v-btn>
</v-flex>
<v-flex xs6>
<v-btn block outline large color="purple darken-3" dark @click="sendBackToSpeeds">Cancel</v-btn>
</v-flex>
</v-layout>
<v-layout row wrap class="text-xs-center mx-auto" v-else>
<v-flex xs12>
<v-btn block large color="purple darken-3" dark @click="formCheckAndSend()">Save Your Credentials</v-btn>
</v-flex>
</v-layout>
</v-layout>
</v-form>
</v-card>
</v-flex>
<div class="text-xs-center">
<v-bottom-sheet inset v-model="error_sheet">
<v-card dark color="red darken-1">
<v-card-title>
<h1 v-if="credentials_bad" key="bad_creds" class="headline pb-2 oswald mx-auto">{{bad_credentials}}</h1>
<h1 v-if="credentials_bad" key="video" class="title oswald mx-auto">{{watch_video}}</h1>
</v-card-title>
</v-card>
</v-bottom-sheet>
</div>
</v-layout>
</v-container>
</template>
<script>
import {dataShare} from '../packs/application.js';
import axios from 'axios';
import { required } from 'vuelidate/lib/validators';
export default {
validations: {
seller_id: { required },
selected_marketplace: { required },
token: { required },
selected_zones: { required }
},
data: function() {
return {
show_cancel_button: true,
credentials_bad: false,
bad_credentials: "Oh no! Your Amazon credentials aren't right. Can you try again?",
watch_video: "Make sure to watch our video in the top right hand corner",
valid: true,
error_sheet: false,
seller_id: '',
token: "",
selected_zones: [],
selected_marketplace: null,
counter: 1,
subtractor: 1,
wrapCounter: 1,
marketplaces:[
{ text: 'Australia', value: "A39IBJ37TRP1C6" },
{ text: 'Canada', value: "A2EUQ1WTGCTBG2" },
{ text: 'France', value: "A13V1IB3VIYZZH" },
{ text: 'Germany', value: "A1PA6795UKMFR9" },
{ text: 'Italy', value: "APJ6JRA9NG5V4" },
{ text: 'Mexico', value: "A1AM78C64UM0Y8" },
{ text: 'Spain', value: "A1RKKUPIHCS9HS" },
{ text: 'United Kingdom', value: "A1F83G8C2ARO7P" },
{ text: 'United States', value: "ATVPDKIKX0DER" },
],
};
},
created() {
let self = this;
axios.get("https://shopify-ship-refactor-trimakas.c9users.io/return_amazon_credentials").then(response => {
this.seller_id = response.data.seller_id;
if(this.seller_id == ""){
this.show_cancel_button = false;
}
this.show_cancel_button;
this.selected_marketplace = response.data.marketplace;
this.token = response.data.auth_token;
});
},
computed: {
sellerIdErrors() {
const errors = []
if (!this.$v.seller_id.$dirty) return errors
!this.$v.seller_id.required && errors.push('Please enter your Amazon Seller Id')
return errors
},
marketplaceErrors() {
const errors = []
if (!this.$v.selected_marketplace.$dirty) return errors
!this.$v.selected_marketplace.required && errors.push('Please select your Amazon Marketplace')
return errors
},
tokenErrors() {
const errors = []
if (!this.$v.token.$dirty) return errors
!this.$v.token.required && errors.push('Please enter your Amazon Auth Token')
return errors
},
zoneErrors() {
const errors = []
if (!this.$v.selected_zones.$dirty) return errors
!this.$v.selected_zones.required && errors.push('Please choose atleast one shipping zone to add this rate too')
return errors
},
},
methods: {
formCheckAndSend () {
if(this.$refs.form.validate()) {
this.sendAmazonCreds();
}
},
sendBackToSpeeds() {
dataShare.$emit('whereToGo', "speeds");
},
removeCounter() {
dataShare.$emit('removeComponent', this.subtractor);
},
addCounter() {
this.counter++;
dataShare.$emit('addComponent', this.counter);
var allWraps = document.getElementsByClassName("application--wrap");
var classToRemove = allWraps[this.wrapCounter];
classToRemove.classList.remove("application--wrap");
this.wrapCounter++;
},
sendAmazonCreds() {
const AmazonCreds = {
seller_id: this.seller_id,
marketplace: this.selected_marketplace,
auth_token: this.token,
};
let self = this;
axios.post("https://shopify-ship-refactor-trimakas.c9users.io/amazon_credentials_check", AmazonCreds).then(response => {
var creds_status = response.data.are_the_amazon_creds_good;
if(creds_status == true){
dataShare.$emit('whereToGo', "speeds");
this.sendZones();
}
if(creds_status == false){
self.error_sheet = true;
self.credentials_bad = true;
}
});
},
sendZones() {
const SelectedZones = {
zone_info: this.selected_zones
};
axios.post("https://shopify-ship-refactor-trimakas.c9users.io/receive_zone_info", SelectedZones);
}
}
};
</script>
<style>
.chip__content {
background-color: #68007d !important;
color: white !important;
}
.come_closer {
margin-top: -15px !important;
}
</style>
我没有收到任何错误或警告，只是选择框中应该填充的数据不正确。有什么想法吗？我认为，既然您正在将一组对象传递给
v-select<v-select
required
:items="marketplaces"
item-text="text"
item-value="value"
label="Select your Amazon Marketplace"
:error-messages="marketplaceErrors"
v-model="selected_marketplace"
color="purple darken-3"
prepend-icon="map"
@input="$v.selected_marketplace.$touch()"
@blur="$v.selected_marketplace.$touch()"
></v-select>
module.exports = {
resolve: {
alias: {
vue$: 'vue/dist/vue.esm.js'
}
}
}
希望这有帮助。哇，这真是一场噩梦。只花了大约一天的时间就找到了解决方案。希望如果你看到这一点，它也能为你提供一个解决方案 问题的一部分是我还收到了一个
vue安装两次错误和各种其他警告
所以我找到了这个帖子：
那么这个帖子:
最后是：
这就是最终的结果。我在/config/webpack/custom.js
中创建了custom.js
，如下所示：
<v-select
required
:items="marketplaces"
item-text="text"
item-value="value"
label="Select your Amazon Marketplace"
:error-messages="marketplaceErrors"
v-model="selected_marketplace"
color="purple darken-3"
prepend-icon="map"
@input="$v.selected_marketplace.$touch()"
@blur="$v.selected_marketplace.$touch()"
></v-select>
module.exports = {
resolve: {
alias: {
vue$: 'vue/dist/vue.esm.js'
}
}
}
我还必须将environment.js
更新为：
const { environment } = require('@rails/webpacker')
const vue = require('./loaders/vue')
const customConfig = require('./custom')
environment.config.set('resolve.extensions', ['.foo', '.bar'])
environment.config.set('output.filename', '[name].js')
// Merge custom config
environment.config.merge(customConfig)
// Delete a property
environment.config.delete('output.chunkFilename')
environment.loaders.append('vue', vue)
module.exports = environment
这两个配置文件解决了我的问题。另外，作为参考，我正在运行Vuetify 1.2.1
和Vue 2.5.17
以及Rails和Ruby。作为将来的参考，我在使用的代码库中也遇到了类似的问题，似乎组件“v-select”被名为的库覆盖了
在那里，他们展示了如何在那里注册组件，如下所示：
Vue.component（'v-select'，vSelect）
记住在v-select中使用以下选项：
item text=“SomeName”
item value=“SomeID”您应该导入此行
import vSelect from 'vue-select';
在您要使用v-select的文件中，由于我的解决方案是更改组件的名称，所以要使用v-select。
我猜该组件与vuetify冲突，因为它的名称相同
Vue.component('v-selector', vSelect)
<v-selector :options="['Canada', 'United States']"></v-selector>
Vue.component（'v-selector'，vSelect）
诸如此类。另一个原因是，代码中没有
。
我的问题是。
再次添加，修复了问题
有关详细信息，请参阅的答案。我面临着与此相同的问题。我用包装我的应用程序&我可以解决此问题打开浏览器检查器，检查应用程序根节点下是否存在一个
。如果是，请单击
，它会将其转换为
。如果没有，这意味着
无法创建选择菜单，可能您的应用程序中存在一些手动操作Dom的代码，这导致了问题。很抱歉，这与上下文无关，但当提交为空或未选择值时，您的选择是否正确抛出错误。marketplaceErrors（）正确使用了此函数。。因为我无法用相同的代码显示v-select错误，尽管vuelidate可以很好地处理其他输入。是的，已经尝试过了。。我正在使用默认的文本
和值
，但我尝试了你所说的，但没有成功..这解决了我的问题。我没有注意到文档上的项目值
和项目文本
。谢谢