如何更新 v-html Vue 中的值

Question

我有一組將從 API 獲取的項目。 首先，我顯示用______替換###的字符串。 然后，當我單擊按鈕時，我想用<span>word</span>替換它們。 所以我正在使用 v-html。 我以為會顯示新元素，但事實並非如此。 我該怎么辦？

代碼： https ://jsfiddle.net/uosm30p9/

 var example1 = new Vue({ el: '#example', data: { items: [{ str: 'This is ###.', list: ['Frank', 'Eva'] }, { str: 'I am not ###.', list: ['George', 'John', 'Mark'] } ], }, computed: {}, methods: { createStr(item) { item.newStr = item.str; item.newStr = item.newStr.replace("###", "________") return item.newStr }, update(item, word) { item.newStr = item.str; var span = "<span class='.span1'>" + word + "</span>"; item.newStr = item.newStr.replace("###", span) console.log(item.newStr); } } });

 .span1 { color: blueviolet; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> <div id="example"> <ul> <li v-for="(item,i) in items"> <span v-html="createStr(item)"></span> <ul> <li v-for="(word,j) in item.list"> <button v-on:click="update(item,word)">{{word}}</button> </ul> </li> </ul> </div>

Answer 1

好的，為了更輕松地解決您的問題並分離關注點，我通過設置模板並將當前值存儲在每個元素“狀態”中來找到解決方案。

HTML：

<div id="example">
 <ul>
   <li v-for="(item,i) in items">
     <span v-html="createStr(item)"></span>
     <ul>
       <li v-for="(word,j) in item.list">
       <button v-on:click="update(item, j)">{{word}}</button>
     </ul>
    </li>
  </ul>
</div>

Javascript：

var example1 = new Vue({
  el: '#example',
  data: {
    defaultReplacement: "_________",
    items: [{
        selectedOption: null,
        template: 'This is <b class="span1">###</b>.',
        list: ['Frank', 'Eva']
      },
      {
        selectedOption: null,
        template: 'I am not <b class="span2">###</b>.',
        list: ['George', 'John', 'Mark']
      }
    ],

  },
  computed: {},
  methods: {
    createStr(item) {
      var listItem = (item.selectedOption != null) ? item.list[item.selectedOption] : this.defaultReplacement;
      return item.template.replace("###", listItem);
    },
    update(item, j) {
      item.selectedOption = j;      
    }

  }
});

這是工作示例： https ://jsfiddle.net/feload/rhnf8zv4/5/

Answer 2

 var example1 = new Vue({ el: '#example', data: { items: [{ str: 'This is ###.', list: ['Frank', 'Eva'], current: "________" }, { str: 'I am not ###.', list: ['George', 'John', 'Mark'], current: "________", } ], }, computed: {}, methods: { createStr(item) { item.newStr = item.str; item.newStr = item.newStr.replace("###", item.current); return item.newStr; }, update(item, word, idx) { item.current = word; this.$set(this.items, idx, item); } } });

 .span1 { color: blueviolet; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> <div id="example"> <ul> <li v-for="(item,i) in items"> <span v-html="createStr(item)"></span> <ul> <li v-for="(word,j) in item.list"> <button v-on:click="update(item,word, i)">{{word}}</button> </ul> </li> </ul> </div>

Answer 3

首先嘗試使您的數據對象具有響應性，以便 Vue 可以觀察到項數組的更改：

data: function () {
    return {
        items: [
            {
                str: 'This is ###.',
                list: ['Frank', 'Eva']
            },
            {
                str: 'I am not ###.',
                list: ['George', 'John', 'Mark']
            }
        ]
    }
},

查看本頁底部的示例： https ://v2.vuejs.org/v2/guide/reactivity.html