Невозможно исправить предупреждение. Обнаружены повторяющиеся ключи: «0». Это может вызвать ошибку обновления - PullRequest
0 голосов
/ 01 ноября 2019

Vue js выдает предупреждение, которое говорит vue.runtime.esm.js? 2b0e: 619 [Vue warn]: Обнаружены повторяющиеся ключи: '0'. Это может вызвать ошибку обновления.

Я попытался использовать метод получения и установки в вычисляемой переменной и отправить значение в хранилище Vuex.

Вот код для элемента html

<!-- Displaying Sample TappingPessure input field-->
                                                        <v-layout 
                                                            wrap row
                                                            class="text-xs-left mx-auto pt-2"
                                                            style="height:50px;" >

...some code 
                                                          
                                                            <v-flex xs12 md1 sm1 class="ma-0 pa-0"
                                                            >
                                                                <v-text-field
                                                                class="myfont1 inputValue"
                                                                name="pressure" 
                                                                id="pressure" 
                                                                required  
                                                                v-model="tappingPressure"
                                                                type="number"
                                                                reverse
                                                                style="max-width:70px;"
                                                                 >
                                                                </v-text-field>
                                                            </v-flex> 

   
                                                                
 
...some code 
                                                          
                                                                 
                                                        </v-layout>

вот код для вычисляемой переменной

tappingPressure:{
                get () {
                return this.$store.getters.tappingPressure
                },
                set (value) {
                this.$store.dispatch('setTappingPressure',{data:value})
                }
            },

Вот код vuex для обновления переменной

import Vue from 'vue'
import Vuex from 'vuex'
import '@/firebase/init.js'
import  firebase from 'firebase/app'
import 'firebase/auth'


import router from "@/router.js"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  ...some code
  
  tappingPressure:"",
  
  ...some code
  },
  
  mutations: {
   setTappingPressure(state, payload) {
      state.tappingPressure = payload.data;
    },
    
    ...some code
  },
  
  actions: {
   setTappingPressure({
      commit
    }, payload) {
      commit("setTappingPressure", payload);
    },
    ...some code
    
   },
   
   
   getters: {
   
   tappingPressure(state) {
      return state.tappingPressure;
    },
    
    }
   
});
  
  
  

Вот снимок экрана с ошибкой enter image description here

Я пытался оставить код вне шагового и вызывающей функцииДиалог Vuetify работает хорошо. Эта проблема возникает, когда я вызываю функцию из степпера Vuetify. Код работает нормально. Vuex обновляется. Предупреждающие сообщения заполняют консоль.

Кто-нибудь, пожалуйста, предложите выход. Заранее спасибо

1 Ответ

0 голосов
/ 02 ноября 2019

Проблема заключалась в том, что в шаблоне было 2 рендеринга списка ... В обоих случаях я использовал "index" для привязки клавиш, как показано ниже

v-for="(compo,index) in compoDataAz" :key="index" 
v-for="(compo, index) in analyteData" :key="index" 

Я изменил оба значения на

v-for="(compo,index) in compoDataAz" :key="'compo'+index"
v-for="(compo, index) in analyteData" :key="'analyte'+index"

Устранена проблема. Причиной предупреждения было то, что я использовал «индекс» в качестве ключа для отображения обоих списков. Наконец-то я понял это, к счастью. Просто поделитесь этим на случай, если кто-то еще может найти это полезным.

...