как обновить значение в 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

Сначала попробуйте сделать ваш объект данных реактивным, чтобы Vue мог наблюдать изменения в массиве элементов:

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

Посмотрите на пример внизу этой страницы: https://vuejs.org/v2/guide/reactivity.html

Answer 3

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>