Vue.js 2: вычисляется без обновления при изменении данных

Question

HTML:

<div id="app">
  <h3>My identicon generator</h3>
  <div>
    input:
    <input v-on:input="onInput"/>
  </div>

  <div>
    output:

    <div v-html="identicon"></div>
  </div>
</div>

JS:

new Vue({
  el: '#app',
  data: {
    textInput: '',
  },
  computed: {
    identicon: function() {
      console.log('new identicon for:', this.textInput);
      return jdenticon.toSvg(this.textInput, 200);
    }
  },
  methods: {
    onInput: (e) => {
      this.textInput = e.target.value;
      console.log('is it set?', this.textInput);
    }
  }
});

Codepen: https://codepen.io/anon/pen/JxNrNP

Я ожидал, что идентификатор будет обновляться при вводе текста в поле ввода,console.log(is it set?', this.textInput) работает правильно, а последнее значение textInput отображается в консоли.Однако console.log('new identicon for:', this.textInput) запускается только во время загрузки страницы и больше не запускается, что приводит к тому, что идентификатор остается прежним.Почему вычисляемый метод не вызывается при изменении textInput?Как мне это исправить?

Answer 1

Я сделал некоторые изменения, и теперь это работает.1.- Измените объект данных на функцию, которая возвращает объект 2.- Измените @input на v-модель

new Vue({
  el: '#app',
  data(){
    return {
      textInput: '',
    }
  },
  computed: {
    identicon() {
      console.log('new identicon for:', this.textInput);
      return jdenticon.toSvg(this.textInput, 200);
    }
  },
  methods: {
    onInput: (e) => {
      this.textInput = e.target.value;
      console.log('is it set?', this.textInput);
    }
  }
});

Работает как положено.

https://codepen.io/anon/pen/ZwKazg?editors=1111

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

Это работает, я изменил их все на функции ES6.

new Vue({
  el: '#app',
  data: {
    textInput: '',
  },
  computed: {
    identicon() {
      console.log('new identicon for:', this.textInput);
      return jdenticon.toSvg(this.textInput, 200);
    }
  },
  methods: {
    onInput(e) {
      this.textInput = e.target.value;
      console.log('is it set?', this.textInput);
    }
  }
});