Question

我有一系列要通过API提取的项目。首先，我显示将###替换为______的字符串。然后，当我单击按钮时，我想将其替换为<span>word</span>。所以我正在使用v-html。我以为会显示新元素，但不会显示。我该怎么办？

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

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 2

好吧，为了更轻松地解决您的问题并分离问题，我提出了一个解决方案，方法是设置模板并将当前值存储在每个元素“状态”中。

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 3

首先尝试使您的数据对象具有反应性，以便Vue可以观察到对项目数组的更改：

mymember(A, [A|_]).
mymember(A, [_|T]) :-  mymember(A, T).

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

如何在v-html Vue中更新值

3 个答案: