Vue.js update parent data with an input from a child component

Question

I'm using Vue.js 2 and I'm trying to update the description of a file using an input in a child component. I've been reading a few related questions and read some of the official docs along with .sync but I'm struggling to get the result I want since files is a list of objects.

Here's what I've been trying.

Vue.component('myComponent', {
  props: ["file"],
  data() {
    return {
      myDescription: '',
    }
  },
  mounted() {
    this.myDescription = this.file.description;
  },
  template: `
    <div>
        <label>{{ file.name }}</label>
        <br>
        <input type="text" @input="update" :value="myDescription"></input>
        <br><br>
    </div>
  `,
  methods: {
    update() {
      this.$emit("update-description", this.myDescription, this.file);
    },
  }
})

var app = new Vue({
  el: '#app',
  methods: {
    updateDescription(description, file) {
      console.log(description);
    }
  },
  data: {
    files: [{
        id: 1,
        name: "Hello",
        description: "",
      },
      {
        id: 2,
        name: "World",
        description: "Foo",
      },
      {
        id: 3,
        name: "John",
        description: "Bar",
      }
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div> {{ files }} </div>
  <br>
  <my-component v-for="file in files" :key="file.id" :file="file" @update-description="updateDescription" />
</div>

Shoejep · Accepted Answer · 2022-03-04 13:13:33Z

You're almost there, you can see in the code you've provided that the child component event is being emitted but the value is empty. The problem is you're not updating myDescription, if you change your :value to v-model then it will update, as v-model uses two way binding.

Also, if you want to update the file description, you can just do:

file.description = description;

Vue.component('myComponent', {
  props: ["file"],
  data() {
    return {
      myDescription: '',
    }
  },
  mounted() {
    this.myDescription = this.file.description;
  },
  template: `
    <div>
        <label>{{ file.name }}</label>
        <br>
        <input type="text" @input="update" v-model="myDescription"></input>
        <br><br>
    </div>
  `,
  methods: {
    update() {
      this.$emit("update-description", this.myDescription, this.file);
    },
  }
})

var app = new Vue({
  el: '#app',
  methods: {
    updateDescription(description, file) {
      console.log(description);
      file.description = description;
    }
  },
  data: {
    files: [{
        id: 1,
        name: "Hello",
        description: "",
      },
      {
        id: 2,
        name: "World",
        description: "Foo",
      },
      {
        id: 3,
        name: "John",
        description: "Bar",
      }
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div> {{ files }} </div>
  <br>
  <my-component v-for="file in files" :key="file.id" :file="file" @update-description="updateDescription" />
</div>

Collectives™ on Stack Overflow

Vue.js update parent data with an input from a child component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related