Данные vuejs не изменяются при изменении свойства

Question

Я очень новичок в Vuejs, поэтому, хотя я, возможно, сам смогу найти решение с помощью наблюдателя или, возможно, ловушки жизненного цикла, я хотел бы понять, почему следующее не работает и что следует делать вместо этого.

Проблема в том, что измененные локальные данные не обновляются, когда потребитель компонента изменяет свойство cellContent. Родителю принадлежит cellContent, поэтому прямое использование свойства - нет-нет (похоже, Vue согласен).

<template>
  <textarea
    v-model="mutableCellContent"
    @keyup.ctrl.enter="$emit('value-submit', mutableCellContent)"
    @keyup.esc="$emit('cancel')">
  </textarea>
</template>

<script>
export default {
  name: 'CellEditor',
  props: ['cellContent', 'cellId'],
  data () {
    return {
      mutableCellContent: this.cellContent
    }
  }
}
</script>

<style>
...
</style>

Answer 1

В data (mutableCellContent: this.cellContent) вы создаете копию реквизита, поэтому при смене родителя локальная копия (mutableCellContent) не обновляется. ^{(Если вы должны иметь локальную копию, вам нужно будет посмотреть, как родитель обновляет ее.)}

Вместо этого вам не следует хранить копию в дочернем компоненте, просто пусть состояние будет в родительском (и измените его с помощью событий, передаваемых в дочернем компоненте). Это хорошо известная лучшая практика (и не только в Vue, но и в других средах, если можно так выразиться).

Пример:

Vue.component('cell-editor', {
  template: '#celleditor',
  name: 'CellEditor',
  props: ['cellContent', 'cellId'],
  data () {
    return {}
  }
});

new Vue({
  el: '#app',
  data: {
    message: "Hello, Vue.js!"
  }
});

textarea { height: 50px; width: 300px; }

<script src="https://unpkg.com/vue"></script>

<template id="celleditor">
  <textarea
    :value="cellContent"
    @keyup.ctrl.enter="$emit('value-submit', $event.currentTarget.value)"
    @keyup.esc="$event.currentTarget.value = cellContent">
  </textarea>
</template>

<div id="app">
  {{ message }}
  <br>
  <cell-editor :cell-content="message" @value-submit="message = $event"></cell-editor>
  <br>
  <button @click="message += 'parent!'">Change message in parent</button>
</div>

Answer 2

Вы должны создать наблюдателя для опоры cellContent.

Vue.config.productionTip = false
Vue.config.devtools = false
Vue.config.debug = false
Vue.config.silent = true


Vue.component('component-1', {
  name: 'CellEditor',
  props: ['cellContent', 'cellId'],
  data() {
    return {
      mutableCellContent: this.cellContent
    }
  },
  template: `
    <textarea
      v-model="mutableCellContent"
      @keyup.ctrl.enter="$emit('value-submit', mutableCellContent)"
      @keyup.esc="$emit('cancel')">
    </textarea>
  `,
  watch: {
    cellContent(value) {
      this.mutableCellContent = value;
    }
  }
});

var vm = new Vue({
  el: '#app',
  data() {
    return {
      out: "",
      cellContent: ""
    }
  },
  methods: {
    toOut(...args) {
      this.out = JSON.stringify(args);
    },
    changeCellContent() {
      this.cellContent = "changed at " + Date.now();
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <component-1 :cell-content="cellContent" @value-submit="toOut" @cancel="toOut"></component-1>
  <p>{{out}}</p>
  <button @click="changeCellContent">change prop</button>
</div>