I've looked through all the posts about this subject and can't seem to find an answer. My Vuex store IS updating fine, but the DOM is not.
This is a screenshot of what is going on
I have a getter called returnAmazonCredentials
returnAmazonCredentials(state) {
return state.amazonCredentials
},
I import it like this:
computed: {
...mapGetters('amazonCredentials', [
'returnAmazonCredentials',
]),
returnAmazonCredentials is an array and so I use it in my DOM with a v-for
v-for="(cred, index) in returnAmazonCredentials"
And I also use getters and setters to update the elements in the array. Here is one example
sellerId: {
get() {
return this.returnAmazonCredentials.merchant_id
},
set(value) {
this.$set(this.returnAmazonCredentials[this.credIndex], 'merchant_id', value)
}
},
this.credIndex is set when an element is clicked
When I want to remove an element from the returnAmazonCredentials array I do this:
this.returnAmazonCredentials.splice(index, 1)
The Vuex store is updated perfectly, while the DOM still shows old data that no longer exists in the store. I've tried:
this.$nextTick() as well as this.$forceUpdate()
No luck.. Where did I go astray?
EDIT: This is all my code in my component
<template>
<v-container fluid v-resize="getHeight">
<v-row align="center" justify="center">
<v-col cols="12">
<v-card
class="purple_top"
color="#e1bee7"
>
<v-container>
<v-row>
<v-col cols="1" align="start">
<v-icon class="my_dark_purple_text pretty_icon mt-2" x-large>info</v-icon>
</v-col>
<v-col cols="11" align="start">
<h1 class="text-h6 mont bold pt-3 pb-2">You will not be charged until after you've entered all your credentials below</h1>
<h1 class="text-subtitle-1 mont font-weight-bold">After your 7 day free trial your costs will be:</h1>
<v-list class="purple_list" dense>
<v-list-item>
<v-list-item-icon class="mr-2">
<v-icon class="my_dark_purple_text">info</v-icon>
</v-list-item-icon>
<v-list-item-content>
<div class="text-body-1 mont">$25/month for the first marketplace</div>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-icon class="mr-2">
<v-icon class="my_dark_purple_text">info</v-icon>
</v-list-item-icon>
<v-list-item-content>
<div class="text-body-1 mont">$20/month for each additional marketplace</div>
</v-list-item-content>
</v-list-item>
</v-list>
</v-col>
</v-row>
</v-container>
</v-card>
</v-col>
</v-row>
<v-row>
<v-col cols="8">
<v-card
color="#f1e7df"
id="devIds"
>
<v-card-title>
<v-icon class="my_dark_purple_text">vpn_key</v-icon>
<h1 class="text-h6 oswald my_dark_purple_text pl-2">DEVELOPMENT IDS</h1>
</v-card-title>
<v-container>
<v-row>
<v-col cols="6" class="ml-10">
<h1 class="text-h6 mont">US, Canada, Mexico</h1>
</v-col>
<v-col cols="5">
<h1 class="text-h6 mont">UK and the EU</h1>
</v-col>
</v-row>
<v-row>
<v-col cols="3" class="ml-10">
<v-text-field readonly solo :value="us" class="mont"></v-text-field>
</v-col>
<v-col cols="3">
<v-btn height="48px" class="my_dark_purple_btn ml-n7" @click="copyCreds(us)">Copy</v-btn>
</v-col>
<v-col cols="3" class="">
<v-text-field readonly solo :value="eu" class="mont"></v-text-field>
</v-col>
<v-col cols="2">
<v-btn height="48px" class="my_dark_purple_btn ml-n7" @click="copyCreds(eu)">Copy</v-btn>
</v-col>
</v-row>
<v-row>
<v-col cols="6" class="ml-10">
<h1 class="text-h6 mont">Australia</h1>
</v-col>
<v-col cols="5">
<h1 class="text-h6 mont">Japan</h1>
</v-col>
</v-row>
<v-row>
<v-col cols="3" class="ml-10">
<v-text-field readonly solo :value="us" class="mont"></v-text-field>
</v-col>
<v-col cols="3">
<v-btn height="48px" class="my_dark_purple_btn ml-n7" @click="copyCreds(australia)">Copy</v-btn>
</v-col>
<v-col cols="3" class="">
<v-text-field readonly solo :value="eu" class="mont"></v-text-field>
</v-col>
<v-col cols="2">
<v-btn height="48px" class="my_dark_purple_btn ml-n7" @click="copyCreds(japan)">Copy</v-btn>
</v-col>
</v-row>
</v-container>
</v-card>
</v-col>
<v-col cols="4">
<v-card
color="#d9d6e1"
:height="matchingHeights + 'px'"
>
<v-container fluid fill-height>
<v-row class="pt-2">
<v-col cols="12" justify="center" align="center">
<a href="https://youtu.be/-iWlFyX0254" target="_blank">
<v-img
src="how.png"
max-width="153px"
contain
></v-img>
</a>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<h1 class="mont text-h5 text-center">Do I retrieve my US Amazon credentials?</h1>
</v-col>
</v-row>
<v-row>
<v-divider class="mx-4"></v-divider>
</v-row>
<v-row class="pt-2">
<v-col cols="12" justify="center" align="center">
<a href="https://youtu.be/p4RwqegRc9s" target="_blank">
<v-img
src="how.png"
max-width="153px"
contain
></v-img>
</a>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<h1 class="mont text-h5 text-center">Do I retrieve my Amazon credentials outside of the US?</h1>
</v-col>
</v-row>
</v-container>
</v-card>
</v-col>
</v-row>
<p>credentials are {{ returnAmazonCredentials }}</p>
<v-row
v-for="(cred, index) in returnAmazonCredentials"
:key="index"
>
<v-col cols="12">
<v-card
color="#e9daea"
>
<v-card-title>
<v-icon class="my_dark_purple_text">language</v-icon>
<h1 class="text-h6 oswald my_dark_purple_text pl-2">ENTER YOUR AMAZON CREDENTIALS BELOW</h1>
</v-card-title>
<v-container>
<v-form>
<v-row>
<v-col cols="6">
<v-row>
<v-col cols="12">
<v-text-field
color="#6a0080"
label="Amazon Seller Id"
prepend-icon="person"
v-model="sellerId"
@click="setIndex(index)"
:rules="[() => !!returnAmazonCredentials[credIndex]['merchant_id'] || 'Please provide your Amazon seller id', sellerIdValidation(!!returnAmazonCredentials[credIndex]['merchant_id']) ]"
></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-select
:items="marketplaces"
label="Select your Amazon Marketplace"
color="#6a0080"
prepend-icon="map"
v-model="marketplace"
@click="setIndex(index)"
:rules="[() => !!returnAmazonCredentials[credIndex]['marketplace'] || 'Please select your Amazon marketplace', marketValidation(!!returnAmazonCredentials[credIndex]['marketplace']) ]"
></v-select>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field
color="#6a0080"
label="Amazon Auth Token"
prepend-icon="https"
v-model="authToken"
@click
