afghany
1 year ago
76
3
Vue

issue with accessing data from my component

Posted 1 year ago by afghany

i am passing data to my component and all data assigned to my component correctly "i checked it at vue dev tool it's assigned correctly" but when i am try to access the id attribute from specific component it's return latest component id attribute not the current component attribute

parent component code :

        <tr v-for="object in data">

            <td v-for="field in fields">{{object[field.includes(' ') ? field.replace(' ','_') : field]}}</td>

            <td v-if="Actions">

                <a v-for="action in Object.keys(Actions)"
                   
                   @click.prevent="determineAction(action,object[Key])"
                   
                   :href="getActionURI(object[Key],action)"
                   
                   :class="getBtnClass(action)">
                    
                    {{action}}
                
                </a>

            </td>

            <edit-modal v-show="displayEditModal" @EditModalClose="hideEditMoodal()"                             
             :data="object" :fields="editFields"></edit-modal>

        </tr>

here is the child component code :

    <section class="modal-card-body">
    
      <form>

            <div class="form-group" v-for="(field,index) in fields">
            
                <label>
                        
                        {{index}}

                        <input :type="field" class="form-control" :placeholder="'Please enter ' + index"     
                               :value="data[index]" @input="index = $event.target.value">

                </label>
           
            </div>                

      </form>
    
    </section>
    
    <footer class="modal-card-foot">
      
        <button class="btn btn-success btn-block" @click="update">Update</button>
    
        
    </footer>
    


<script>

    export default{
        props:{
            data: {
                type: Object,
                required : true
            },
            fields: {
                type: Object,
                required : false
            }
        },
        data(){
            let temp = {};
            for(let field in this.fields){

                temp[field] = this.data[field.includes(' ') ? field.replace(' ','_') : field];
            }
            return temp;
        },
        methods:{
            fireEvent(eventName,data = null){
                window.Events.fire(eventName,data);
            },
            update(){
                console.log(this.data.id);
            }
        }
    }

</script>

Please sign in or create an account to participate in this conversation.