VueJS мутирует дубликат v-модели (: значение, @input) - PullRequest
Новая
       22

VueJS мутирует дубликат v-модели (: значение, @input)

0 голосов
/ 27 мая 2019

У меня проблема с использованием v-модели в моем собственном компоненте. А именно, я не хочу использовать State или Bus. В настоящее время компонент правильно возвращает единственное значение в App.js, он дублирует сам себя. Я не могу справиться с этим, пожалуйста, помогите и объясните мне проблему.

Большое спасибо!

App.js: 

<template>
  <b-container>
    <SectionSelector :AddSection="AddSection"/>
      <component 
          v-for="(section, index) in sections"
          :key="index"
          :is="section.type"
          :sectionIndex="index"
          :sectionData="section[index]"
          @sectionDataEmit="sectionDataEmit"/>
  </b-container>
</template>

<script>
  import SectionSelector from './components/SectionSelector.vue';
  import FullText from './components/sections/FullText.vue';
  import FullImage from './components/sections/FullImage.vue';
  import ImageRightTextLeft from './components/sections/ImageRightTextLeft.vue';
  import ImageLeftTextRight from './components/sections/ImageLeftTextRight.vue';

  export default {
    data() {
      return {
        sections: []
      }
    },
    methods: {
      AddSection(sectionData) {
        this.sections.push(sectionData);
      },
      updateSection(sectionIndex, sectionData) {
        this.sections[sectionIndex] = sectionData;
      },
      sectionDataEmit(emitData) {
        // eslint-disable-next-line
        console.log(emitData.position, emitData.content);
        this.sections[emitData.position].fields.text = emitData.content;
      }
    },
    components: {
      SectionSelector,
      FullText,
      FullImage,
      ImageRightTextLeft,
      ImageLeftTextRight
    }
  }
</script>

SectionSelector.vue: 

<template>
  <b-row>
        <b-dropdown id="dropdown-1" text="Select" class="m-md-2">
          <b-dropdown-item v-for="(section, index) in sections"
                          :key="index"
                          @click="PushSection(index)"> {{ section.type }} </b-dropdown-item>
        </b-dropdown>
    </b-row>
</template>

<script>
  export default {
    props: ['AddSection'],
    data() {
      return {
        sections: [
          { 
            type: 'FullText',
            fields: {
              text: ''
            }
          },
          { 
            type: 'FullImage',
            fields: {
              url:''
            }
          },
          { 
            type: 'ImageRightTextLeft',
            fields: {
              img: '',
              text: ''
            }
          },
          { 
            type: 'ImageLeftTextRight',
            fields: {
              img: '',
              text: ''
            }
          }
        ]
      }
    },
    methods: {
      PushSection(index) {
        this.AddSection(this.sections[index])
      }
    }
  }
</script>

FullText.vue: 

<template>
  <b-row>
    <h3>Full text {{ sectionIndex+1 }}</h3>
    <b-textarea
    :value="sectionData" 
    @input="sectionDataEmit"></b-textarea>
  </b-row>
</template>

<script>
  export default {
    props: ['sectionIndex', 'sectionData'],
    methods: {
      sectionDataEmit(value) {
        let emitData = {
          position: this.sectionIndex,
          content: value
        }
        this.$emit('sectionDataEmit', emitData)
      }
    }
  }
</script>

В настоящее время код вызывает дублирование section.fields.text (отображается в расширении Chrome Vue)

1 Ответ

0 голосов
/ 27 мая 2019

В вашем коде есть место, которое использует object[index]=. Не делайте этого с объектами данных Vue. Вместо этого используйте Vue.set(object, index, value). 

updateSection(sectionIndex, sectionData) {
        Vue.set(sections,sectionIndex, sectionData);
      },

Это основано на правиле, согласно которому Vue не может реагировать на новые свойства, добавленные к объекту после инициализации data.

...