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

我希望得到更新在输入字段中输入文本identicon。 console.log(is it set?', this.textInput)正常运行，并且textInput的最新值显示在控制台中。但是，console.log('new identicon for:', this.textInput)仅在加载页面时运行，并且不再运行，这导致identicon保持原样。为什么当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方法的范围和identicon计算的属性有关。

这有效，我将它们全部更改为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);
    }
  }
});

Vue.js 2：计算后不会根据数据更改进行更新

1 个答案: