Question

我正在使用Chrome扩展程序，并且在两个不同的屏幕上都有一个下拉菜单。我使用router-link在两个窗口之间传递正确的参数，但是下拉菜单出现问题。尽管在屏幕上显示了正确的数据，它始终会选择第一个值。

settings.vue

<router-link :to="{ name: 'SummaryWId', params: { accountid: chosenAccount.apikey}}" text="summary"><span style="cursor: pointer;" title="Summary"></span></router-link>

accountSummary.vue

<router-link :to="{ name: 'SettingsWId', params: { accountid: chosenAccount.apikey}}" text="settings"><span style="cursor: pointer;" title="Settings"></span></router-link>

我在上面的页面中包含了下拉菜单文件。两者之间的唯一区别是名称，另一个文件中的name:"SummaryWId"是name:"SettingsWId"。我的下一步是将两个被淹没的文件合并为一个文件。

accountDropDown.vue

<template>
    <span>
        <select @change="followLink" >
            <option
                v-for="account in allNamedAccounts"
                v-if="account.network_name != undefined"
                :value="account.apikey"
                v-text="account.network_name">
            </option>
        </select>
    </span>
</template>

<script>
import {dataGetter} from "@/datagetter/dataGetter";

export default{
    name:"accountDropDown",
    mixins:[dataGetter],
    data(){
        return {};
    },
    methods:{
        followLink(e){
            this.$router.push(
                {
                    name:"SummaryWId",
                    params:{
                        accountid:e.target.value
                    }
                }
            );
            this.$emit('linkfollow');
        },
    },
}
</script>

dataGetter.js

methods:{
    allAccounts(){
        return this.$store.getters.accounts;
    },  
    firstAccount(){
        let key = Object.keys(this.allAccounts())[0];
        return this.allAccounts()[key];
    },  

},  
computed:{
    chosenAccount(){
        if( this.accountId() != undefined ){
            let accounts = this.allAccounts();
            return this.allAccounts()[this.accountId()];
        }else{
            return this.firstAccount();
        }   
    },  
    allNamedAccounts(){
        let accounts = this.allAccounts();
        let clean = []; 
        for(let account in accounts){
            if( accounts[account] != undefined){
                clean.push(accounts[account]);
            }   
        }   
        return clean;
    },  
},

似乎我在dataGetter文件中做错了。我尝试使用数组中的订单，但无法解决问题。

我真的不确定我缺少什么，我们将不胜感激。

路由器链接到选定的下拉值

0 个答案: