Home>

[Current status]
I want to get input data on a screen with two input forms in the panel.
At present, the structure is parent (entire screen)-child (panel)-child (input form).

The following error has occurred, and the delivery method is probably wrong.

  

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.Prop being mutated: "place"

Can anyone tell me how to transfer data for multiple components?
It will be helpful if you can answer.

Full screen

:

    <place-detail-panel
    : place = "overviewForm.place"
    : content = "overviewForm.content"
    v-model = "overviewForm"
    @ addPlacePanel = "addPlacePanel ()"
    ></place-detail-panel>

:
   data () {
        return {
            overviewForm: [
                {place: '', content: ''}
            ]
        }
    },
    methods: {
        addPlacePanel () {
            this.overviewForm
            console.log (this.overviewForm, 'overviewForm')
        }
    }

Child (panel)


        
            <!-Clear button->
            
                
                    <i></i>
                
            
            <!-->
            <compose-i-f name = "place" label = "place" placeholder = "Please enter a place" v-model = "place" />
            <compose-content name = "content" label = "detail" placeholder = "Please enter details" v-model = "content" />
            
                <button @click = "$emit ('addPlacePanel')">Add item</button>
            
        
    
<script>
import ComposeIF from '../molecules/ComposeInputField.vue';
import ComposeContent from '../molecules/BMoverviewTextarea.vue';
export default {
    components: {
        ComposeIF,
        ComposeContent
    },
    props: {
        place: String,
        content: String
    }
}
</script>

Child (input form)


        <label: for = "name">{{label}}</label>
        <input @ input = "updateValue": id = "label" type = "text": placeholder = "placeholder">
    
<script>
export default {
    props: {
        name: String,
        label: String,
        placeholder: String
    },
    methods: {
        updateValue: function (e) {
            this. $emit ("input", e.target.value);
        }
    }
}
</script>
  • Answer # 1

    As with nt4c above, prop cannot be changed directly.
    You cannot change it unless you drop it into another variable such as data.

    Personally, it is better to process with the official "Global Event Bus"
    I think that the data exchange between components should be done cleanly.

    // Add the following to app.js (entry point, Vue rendering file)
    // Can process global events on $hub
    Vue.prototype. $Hub = new Vue ()
    // Child: Send event directly to full screen component
    methods: {
      updateValue (e) {
        this. $hub. $emit ('add-place-panel', e.target.value)
      }
    }
    // Add mounted to the entire screen and receive the event
    mounted: {
      this. $hub.on ('add-place-panel', this.onAddPlacePanel)
    }


    I'm sorry if there is a misunderstanding.

  • Answer # 2

    The error is "Don't change the prop directly, because the value is overwritten each time the parent component is re-rendered."
    This can be avoided by treating prop as data.
    Reference: Specific copy and paste of circular references such as tree structure in Vue.js

Related articles