将数据从父组件传递到子组件时，为什么我不能将数据绑定到我的 v-model？

Question

I would like to pass data from my parent to child component and bind data to a input field through v-model to display data from my api call in parent component. But it seems to be problem when binding to input field i get this error message: Unexpected mutation of "data" prop.eslintvue/no-mutating-props

Partent Component

<script lang="ts">
import { defineComponent,ref } from 'vue';
import axios from 'axios'
import ChildComponent from '../components/ChildComponent.vue';

export default defineComponent({
    Component: { ChildComponent },
    name: 'IndexPage',
    setup() {
        return {
            fixed: ref(false),
            data: []
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            axios.get('/api/Hotel/' + 2).then((response) => {
                this.data = response.data;
                this.fixed = true,
                    console.log(this.data);
            });
        }
    },
    components: { ChildComponent }
});

</script>

Child Component

<template>
    <main>
        <q-card class="height: 500px; width: 500px">
      <q-card-section>
        <div class="text-h6">Terms of Agreement</div>
        <div class="q-pa-md">
    <div class="q-gutter-md" style="max-width: 300px">
      
    <div>
                <q-input filled v-model="data.message" label="Filled" />

    </div>

    </div>
  </div>
      </q-card-section>

      <q-separator />

      <q-separator />

      <q-card-actions align="right">
        <q-btn flat label="Decline" color="primary" v-close-popup />
        <q-btn flat label="Accept" color="primary" v-close-popup />
      </q-card-actions>
    </q-card>

    </main>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
    props:['data'],
    name: 'ChildComponent',
    setup() {
        return {
            text: ref(''),
        };
    },

});


</script>

I have tried this to make mounted methods in my child components like this:

    <div>
       <q-input filled v-model="dataIn.message" label="Filled" />

    </div>

export default defineComponent({
    props:['data'],
    name: 'ChildComponent',
    setup() {
        return {
            text: ref(''),
            dataIn:{}
        };
    },

    mounted(){
    this.dataIn = this.data
    },
});

It seems to work but not optimal, i lost my data when i refresh my page. Anyone have a soulution?

Answer 1

Props should be read readonly. Your dataIn approach needs a watcher that will update your dataIn whenever your data props change

optionsApi:

export default defineComponent({
props:['data'],
name: 'ChildComponent',
data() {
   text: '',
   data: this.dataIn,
}

watcher: {
   dataIn: (newValue,oldValue){
      this.data = newValue
   }
}

});

Answer 2

If I understood you correctly, you need to emit event from child or to use computed property with getter/setter:

 const { ref, onMounted, watch } = Vue const app = Vue.createApp({ setup() { const items = ref({}) const getData = () => { items.value = ({id: 1, message: 'aaa'}) /*axios.get('/api/Hotel/' + 2).then((response) => { this.data = response.data; this.fixed = true, console.log(this.data); });*/ } onMounted(async() => await getData()) // react to chenges from child const changed = (val) => { items.value.message = val.message } return { //fixed: ref(false), items, changed }; }, }) app.component('ChildComponent', { template: ` <main> <q-card class="height: 500px; width: 500px"> <q-card-section> <div class="text-h6">Terms of Agreement</div> <div class="q-pa-md"> <div class="q-gutter-md" style="max-width: 300px"> <div> <.-- listen to updating --> <q-input filled v-model="text:message" @update,model-value="change" label="Filled" /> </div> </div> </div> </q-card-section> <q-separator /> <q-separator /> <q-card-actions align="right"> <q-btn flat label="Decline" color="primary" v-close-popup /> <q-btn flat label="Accept" color="primary" v-close-popup /> </q-card-actions> </q-card> </main> `: props,['items'], setup(props. {emit}) { const text = ref(props,items) // emit event with changed value const change = () => { emit('changed'. text.value) } // watch for the props changes watch( () => props,items, (newValue. oldValue) => { text;value = newValue; } ), return { text; change }, }. }) app.use(Quasar) app.mount('#q-app')

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css"> <link href="https://cdn.jsdelivr.net/npm/quasar@2.5.5/dist/quasar.prod.css" rel="stylesheet" type="text/css"> <div id="q-app"> {{items}} <:-- listen to child event --> <child-component:items="items" @changed="changed"></child-component> </div> <script src="https.//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod:js"></script> <script src="https.//cdn.jsdelivr.net/npm/quasar@2.5.5/dist/quasar.umd.prod.js"></script>

Answer 3

It seems that you want to make change to your data on your child component, you have to make it two-way binding. You should change your child code like this ( you are using custom q-input in your component and the attributes may differ a little but it is the same concept):

<q-input
        :value="value"
        v-bind="$attrs"        
        v-on="$listeners"
        @input="(v) => $emit('input', v)"
      />

and instead of using data prop you should change it to value:

  props: {
    value: {
      type: [String], // multiple type also defenition accepted
      default: "",
    },
}

then in your parent simply use child component like this:

<your-child-component v-model="someData" />