3

I am trying to pass an account to a removal method in Vue. I output the account right before the router-link and it shows the correct one, but outputting account in the method shows a different one.

HTML

// OUTPUTTING
{{chosenAccount}}
// ROUTER CLICK
<router-link @click.native="remove(chosenAccount)" to="/summary/" text="summary"><span cursor: pointer;" title="Summary"></span></router-link>

JS

methods:{
    remove(account){
        console.log('removed ',account);
        this.removeAccountData(account); 
    },
},

The console.log in remove shows my other account and not the one I have selected on the page.

Am I missing anything?

Edit:

<template>
    <div id="container" >
        <div id="header">
            <router-link @click.native="remove(chosenAccount, $event)" to="/summary/" text="summary"><span cursor: pointer;" title="Summary"></span></router-link>
        </div>
        <div id="content" >
            <div id="settings" class="text-center" style="margin-left: -4px;">
                <h3 style="color:#1173BD;"><span v-text="chosenAccount.network_name"></span></h3>
                <!-- OUTPUTS ACCOUNT #2 (CORRECT) IN LOCAL STORAGE-->
                {{chosenAccount}}
                <h4>has been removed</h4>
                <h3>
                    <router-link @click.native="remove(chosenAccount, $event)" to="/summary/" text="summary"><span cursor: pointer;" title="Summary"></span></router-link>
                </h3>
            </div>
        </div>
        <div id="footer" style="text-align:center;">
            <router-link to="/" text="add_new_account"><span aria-hidden="true"> Add New Account</span></router-link>
        </div>
    </div>
</template>

<script>
import axios from "axios"
import {dataGetter} from "@/datagetter/dataGetter";
export default{
    name:"removed",
    mixins:[dataGetter],
    data(){
        return{
        }
    },
    methods:{
        getNewData(){
            this.getData();
        },
        remove(account, event){
            // OUTPUTS ACCOUNT #1 (INCORRECT) IN LOCAL STORAGE
            console.log(account);
        },
    },
    computed:{
        networkName(){
            let account = this.account;
            if( account != undefined){
                return account.network_name;
            }
            return "";
        },
    }
}
</script>
A.J
  • 1,140
  • 5
  • 23
  • 58
  • 2
    Is `chosenAccount` one computed property? `The console.log in remove shows my other account` is not clear. is **this other account** first item of accounts or previous selected? – Sphinx Sep 11 '18 at 20:22
  • @Sphinx sorry for being unclear. I have two accounts in my `local.storage`. I am selecting to delete the second one, outputting it `{{chosenAccount}}` and it shows the right one, but as soon as I send it to the `remove` method, the `console.log('removed ',account);` shows the first account instead of the second one (the one I passed). – A.J Sep 11 '18 at 20:51
  • 1
    please provide the `removeAccountData` method – Boussadjra Brahim Sep 11 '18 at 20:54
  • @boussadjrabrahim the `console.log` above that method is already incorrect. I actually commented out the `removeAccountData` for now anyway. The `chosenAccount` that is being passed is not the same account as the one being outputted right above it. – A.J Sep 11 '18 at 20:56
  • 1
    with the given code snippet we cannot figure the problem – Boussadjra Brahim Sep 11 '18 at 21:04
  • @boussadjrabrahim that's fine, I thought maybe I was passing the account in faulty way, but I guess it is not the case. Thanks anyway! – A.J Sep 11 '18 at 21:09
  • 1
    provide more code please – Boussadjra Brahim Sep 11 '18 at 21:15
  • 1
    @boussadjrabrahim edited. – A.J Sep 11 '18 at 21:25
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/179854/discussion-between-boussadjra-brahim-and-nik). – Boussadjra Brahim Sep 11 '18 at 21:36

0 Answers0