我不明白这个.我使用Vuetify样式我的网页,由于某种原因,我不能得到的数据显示在我的v-select
选择框.数据应该来自数组marketplaces
.我以为这可能是一个版本问题,但我已经升级了一切,它仍然不工作..我不能得到该死的东西来显示我的数据!
这是页面:
<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>
字符串
上面的页面是这个页面中的一个组件:
<template>
<v-app>
<credential_instructions class="no_background"></credential_instructions>
<credential_details
xs12
class="no_background"
id="amazon_credentials"
v-for="(item, index) in components"
:index="index"
:key="'fourth' + index "
>
</credential_details>
</v-app>
</template>
<script>
/*global top*/
import {dataShare} from '../packs/application.js';
import credential_instructions from '../components/credential_instructions.vue';
import credential_details from '../components/credential_details.vue';
import axios from 'axios';
export default {
data: function() {
return {
components: [1],
};
},
components: {
credential_instructions,
credential_details
},
created() {
dataShare.$on('addComponent', (data) => {
this.components.push(data);
});
dataShare.$on('removeComponent', (data) => {
this.components.pop();
});
},
methods: {
sendToBilling() {
axios.post('https://new-ship-trimakas.c9users.io/create_billing_plan').then(response => {
console.log(response.data);
top.location.href = response.data.url_redirect;
});
}
}
};
</script>
<style>
.dark-green-button {
background-color: #43A047 !important;
}
.green-font {
color: #43A047 !important;
}
.red-font {
color: #E53935 !important;
}
.full-height .flex{
display: flex !important;
}
.full-height .flex > .card{
flex: 1 1 auto !important;
}
.textfield-background-beige {
background-color: #f7f1ec !important;
}
.theme--light .input-group input:disabled {
color: rgba(0,0,0,.87) !important;
}
.lightbeige {
background-color: #f1e7df !important;
}
.lightblue {
background-color: #d9d6e1 !important;
}
.lightpurple {
background-color: #e9daea !important;
}
.match-to-text-field {
margin-left: -17px !important;
height: 46px !important;
margin-top: 2px !important;
}
</style>
型
最后是我的package.json
{
"name": "shopify-ship-refactor",
"version": "1.0.0",
"description": "Complete Shopify shipping app refactor",
"main": "index.js",
"author": "Todd",
"license": "MIT",
"dependencies": {
"@rails/webpacker": "3.5",
"axios": "^0.18.0",
"v-clipboard": "^2.0.1",
"vue": "^2.5.16",
"vue-loader": "^14.2.2",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.17",
"vuelidate": "^0.7.4",
"vuetify": "^1.0.19"
},
"devDependencies": {
"webpack-dev-server": "2.11.2"
}
}
型
我没有得到任何错误,或警告,它只是应该填充在选择框中的数据没有。任何想法?
9条答案
按热度按时间cyvaqqii1#
另一个原因是你的代码中没有
<v-app></v-app>
。我的问题是这个。再次添加它,解决了这个问题。详情请参见"Vuetify issue with v-menu"上的Sumurai8回答。
piah890a2#
我认为,既然要将一个对象数组传递给
v-select
组件,就需要告诉它什么要显示为文本,并设置为值。所以在你的例子中,它应该看起来像这样:
字符串
他们的文档中有一个关于这一点的部分,但它有点隐藏在那个页面上:自定义项和文本值
希望这对你有帮助。
yquaqz183#
为了将来的参考,我也有一个类似的问题,我工作的代码库,似乎组件“v-select”被一个名为vue-select的库覆盖。
在installation docs中,他们展示了如何像这样注册组件:
字符串
kmbjn2e34#
哇,这是一个噩梦。它只花了大约一个该死的一天找到解决方案。希望如果你看到这一点,它可以为您提供一个解决方案。
问题的一部分是我也得到了一个
vue is installed twice
错误和各种其他警告。所以我找到了这篇文章:Vuetify Bug
此分类下一篇:Webpacker config change
最后是:webpacker custom.js
这就是最终的结果。我在
/config/webpack/custom.js
中创建了custom.js
,它看起来像这样:字符串
我还必须将
environment.js
更新为:型
这两个配置文件解决了我的问题。另外作为参考,我正在运行
Vuetify 1.2.1
和Vue 2.5.17
以及Rails和Ruby沿着。kninwzqo5#
我也遇到过类似的问题,我用
<v-app> </v-app
> Package 我的应用程序,我可以解决这个问题6gpjuf906#
记住在v-select中使用以下命令:
vptzau2j7#
Vuetify v-select API文档看起来错误。项目必须用具有
{title, value}
而不是{text, value}
的对象数组填充。所以你的市场阵列应该是:
字符串
它为我解决了问题。
xxhby3vn8#
由于我的解决方案是改变组件的名称。我猜组件与vuetify冲突,因为有相同的名称。
字符串
差不多吧
4urapxun9#
您应该导入此行
字符串
在您的文件中,您要使用v-select