Question

我在自己的组件中使用v模型时遇到问题。即，我不想使用状态或总线。目前，该组件在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>

目前，该代码导致重复sections.fields.text（在chrome扩展名Vue中可见）

Answer 1

您的代码中有一个使用object[index]=的地方。不要对Vue数据对象执行此操作。而是使用Vue.set(object, index, value)。

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

这是基于以下规则：Vue在初始化data之后不能对添加到对象的新属性做出反应。

VueJS更改od重复v模型（：value，@input）

1 个答案: