Vue.js One-Way Data Binding

App.vue

<template>
  <div id="app">
    <ul>
      <li v-for="string in strings">
        {{string}}
      </li>
    </ul>
    <ul>
      <li v-for="(string, index) in strings">
        <togglable-text-input v-bind:string="string" v-bind:index="index" v-on:updateString="handleUpdateString" />
      </li>
    </ul>
  </div>
</template>

<script>
import TogglableTextInput from './TogglableTextInput.vue';

export default {
  name: 'app',
  components: {
    TogglableTextInput
  },
  data () {
    return {
      strings: [ "foo", "bar", "baz" ]
    }
  },
  methods: {
    handleUpdateString(index, newString) {
      console.log('App.handleUpdateString()', index, newString);
      let modifiedNewString = `${newString}!!!`;
      this.strings.splice(index, 1, modifiedNewString);
    }
  }
}
</script>

TogglableTextInput.vue

<template>
  <div>
    <div v-if="editing">
      <input v-model="stringBeingEdited" />
      <button v-on:click="handleSave">Save</button>
    </div>
    <div v-else>
      {{string}}
      <button v-on:click="handleEdit">Edit</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'togglable-text-input',
  props: ['string', 'index'],
  data() {
    return {
      editing: false,
      stringBeingEdited: '',
    };
  },
  methods: {
    handleEdit() {
      this.stringBeingEdited = this.string;
      this.editing = true;
    },
    handleSave() {
      this.editing = false;
      this.$emit('updateString', this.index, this.stringBeingEdited);
    }
  }
}
</script>