Question

我有这个简单的脚本，当您按下按钮时，它会插入一些HTML，即FontAwesome图标。每个按钮均由“ v-for”循环呈现，文本来自“数据”对象。

我还有另一个按钮@IBInspectable，用于覆盖该数据对象。当您按下它时，所有三个按钮都会按预期更改文本。但是，如果单击前三个按钮中的任何一个向其中添加图标，然后更改数据，则只有不带图标的按钮才会更新。

无论HTML是否已更改，如何强制它们全部更新？如果所有三个按钮中都有一个图标，则按更改数据按钮，我希望所有按钮仅包含更新后的数据对象的文本-没有图标。

我怀疑是因为我在某种意义上用change data覆盖了{{word}}？

${icon} ${e.target.textContent}

const V = new Vue({
  el: "#app",
  data: {
    words: ["One", "Two", "Three"]
  },
  methods: {
    addFa: function(e) {
      const icon = `<i class="fas fa-spinner fa-pulse"></i>`;
      e.target.innerHTML = `${icon} ${e.target.textContent}`;
    },
    changeData: function() {
      this.words = ["Four", "Five", "Six"];
    }
  }
});

Answer 1

Vue无法更新Dom，因为您手动插入了一些Dom节点，这导致与Vnodes的不匹配。

但是您可以使用:key="word"或其他唯一值强制重新安装（选中Vue Guide: key）。它将根据当前状态重新生成Dom节点（将删除fa-icons，因为它不是模板的一部分，幸运的是，它满足您的要求，在数据更改后无需显示图标）。

下面是一个演示：

const V = new Vue({
  el: "#app",
  data: {
    words: ["One", "Two", "Three"]
  },
  methods: {
    addFa: function(e) {
      const icon = `<i class="fas fa-spinner fa-pulse"></i>`;
      e.target.innerHTML = `${icon} ${e.target.textContent}`;
    },
    changeData: function() {
      this.words = ["Four", "Five", "Six"];
    }
  }
});

<link href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <button @click="addFa($event)" v-for="word in words" :key="word">{{word}}</button>
  <button @click="changeData()">Change data</button>
</div>

Vue：当数据更改时，如何更新使用数据的元素？

1 个答案: