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

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>

CodePudding user response：

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>