Vuetify v-select未显示:项目

bvuwiixz  于 2023-11-21  发布在  Vue.js
关注(0)|答案(9)|浏览(129)

我不明白这个.我使用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"
  }
}


我没有得到任何错误,或警告,它只是应该填充在选择框中的数据没有。任何想法?

cyvaqqii

cyvaqqii1#

另一个原因是你的代码中没有<v-app></v-app>。我的问题是这个。再次添加它,解决了这个问题。
详情请参见"Vuetify issue with v-menu"上的Sumurai8回答。

piah890a

piah890a2#

我认为,既然要将一个对象数组传递给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>

字符串
他们的文档中有一个关于这一点的部分,但它有点隐藏在那个页面上:自定义项和文本值
希望这对你有帮助。

yquaqz18

yquaqz183#

为了将来的参考,我也有一个类似的问题,我工作的代码库,似乎组件“v-select”被一个名为vue-select的库覆盖。
installation docs中,他们展示了如何像这样注册组件:

Vue.component('v-select', vSelect)

字符串

kmbjn2e3

kmbjn2e34#

哇,这是一个噩梦。它只花了大约一个该死的一天找到解决方案。希望如果你看到这一点,它可以为您提供一个解决方案。
问题的一部分是我也得到了一个vue is installed twice错误和各种其他警告。
所以我找到了这篇文章:Vuetify Bug
此分类下一篇:Webpacker config change
最后是:webpacker custom.js
这就是最终的结果。我在/config/webpack/custom.js中创建了custom.js,它看起来像这样:

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.1Vue 2.5.17以及Rails和Ruby沿着。

kninwzqo

kninwzqo5#

我也遇到过类似的问题,我用<v-app> </v-app > Package 我的应用程序,我可以解决这个问题

6gpjuf90

6gpjuf906#

记住在v-select中使用以下命令:

  • item-text=“SomeName”*
  • item-value=“SomeID”*
vptzau2j

vptzau2j7#

Vuetify v-select API文档看起来错误。项目必须用具有{title, value}而不是{text, value}的对象数组填充。
所以你的市场阵列应该是:

marketplaces:[
   { title: 'Australia', value: "A39IBJ37TRP1C6" },
   { title: 'Canada', value: "A2EUQ1WTGCTBG2" },
   { title: 'France', value: "A13V1IB3VIYZZH" },
   { title: 'Germany', value: "A1PA6795UKMFR9" },
   { title: 'Italy', value: "APJ6JRA9NG5V4" },
   { title: 'Mexico', value: "A1AM78C64UM0Y8" },
   { title: 'Spain', value: "A1RKKUPIHCS9HS" },
   { title: 'United Kingdom', value: "A1F83G8C2ARO7P" },
   { title: 'United States', value: "ATVPDKIKX0DER" },          
]

字符串
它为我解决了问题。

xxhby3vn

xxhby3vn8#

由于我的解决方案是改变组件的名称。我猜组件与vuetify冲突,因为有相同的名称。

Vue.component('v-selector', vSelect)

<v-selector :options="['Canada', 'United States']"></v-selector>

字符串
差不多吧

4urapxun

4urapxun9#

您应该导入此行

import vSelect from 'vue-select';

字符串
在您的文件中,您要使用v-select

相关问题