CODEWITHSUNDEEP
javascriptvue.js
Matias
Matias

Reputation: 332

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

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>

Upvotes: 2

Views: 3150

Answers (1)

Shoejep
Shoejep

Reputation: 4849

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>

Upvotes: 2

Related Questions