如何防止Vue.js中循环组件的数据/方法共享

Question

I have the vue component with $emit into component and let it return the data from the component. I will use the component to update current page's data. the codes below

Template:

<Testing
@update="update">
</Testing>
<AnotherComponent
:data="text"
>
</AnotherComponent>

Script:

method(){
    update: function(data){
        this.text = data.text
    }
}

it work perfectly if only this one.

Now , i need to make a button to add one more component. I use the for loop to perform this.

Template

<div v-for="index in this.list">
    <Testing
    :name="index"
    @update="update">
    </Testing>
    <AnotherComponent
    :data="text"
    >
    </AnotherComponent>
</div>

Script:

method(){
    addList : function(){
        this.list +=1;
    },
    deleteList : function(){
        this.list -=1;
    },
    update: function(data){
        this.text = data.text
    }
}

The add and delete function run perfectly. However , they share the "update" method and the "text" data. so , If I change the second component , the first component will also changed. I think this is not the good idea to copy the component.

Here are my requirements.

1. This component is the part of the form, so they should have different name for submit the form.

2. The another component" will use the data from the "testing component" to do something. the "testing" and "another component" should be grouped and the will not change any data of another group.

Any one can give me the suggestion how to improve these code? Thanks

Answer 1

What happends is that both are using the data form the parent, and updating that same data.

It seems that you are making some kind of custom inputs. In that case in your child component you can use 'value' prop, and 'input' event, and in the parent user v-model to keep track of that especific data data.

Child component BaseInput.vue:

<template>
  <div>
    <input type="text" :value="value" @keyup="inputChanged">
  </div>
</template>

<script>
export default {
  props: ['value'],
  data () {
    return {

    }
  },
  methods: {
    inputChanged (e) {
      this.$emit('input', e.target.value)
    }
  }
}
</script>

And this is the code on the parent:

<template>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
            <base-input v-model="firstInputData"></base-input>
            <p>{{ firstInputData }}</p>
            <hr>
            <base-input v-model="secondInputData"></base-input>
            <p>{{ secondInputData }}</p>

        </div>
    </div>
</div>

<script>
import BaseInput from './BaseInput.vue'
    export default {
        components: {BaseInput},
        data() {
            return{
                firstInputData: 'You can even prepopulate your custom inputs',
                secondInputData: ''
            }
        }
    }
</script>

In the parent you could really store the diferent models in an object as properties, and pass that object to that "The another component" , pass them as individual props... pass an array ....