Javascript 如何在v-html Vue中更新值

我有一个将从API获取的项目数组。首先，我显示字符串，将

###

替换为

\uuuuuuuuuu

。然后，当我单击按钮时，我想用

word

替换它们。所以我使用的是v-html。我以为新元素会显示出来，但它没有。我该怎么办

代码：

var example1=新的Vue({
el:“#示例”，
数据：{
项目：[{
str:“这是####.”，
名单：[“弗兰克”、“伊娃”]
},
{
str：“我不是。”，
清单：[“乔治”、“约翰”、“马克”]
}
],
},
计算：{}，
方法：{
createStr（项目）{
item.newStr=item.str；
item.newStr=item.newStr.replace（“####”、“uuuuuuuuuuuuuuuuuuuuuuu”）
return item.newStr
},
更新（项目、单词）{
item.newStr=item.str；
var span=“”+单词+”；
item.newStr=item.newStr.replace（“####”，span）
console.log（item.newStr）；
}
}
});
.span1{
颜色：蓝紫色；
}





{{word}}




var example1=新的Vue({
el:“#示例”，
数据：{
项目：[{
str:“这是####.”，
名单：[“弗兰克”、“伊娃”]，
当前：“\uuuuuuuuuuuuuuuuuuuuuuuuuuu”
},
{
str：“我不是。”，
列表：[“乔治”、“约翰”、“马克”]，
当前：“\uuuuuuuuuuuuuuuuuuuuuuuuuuuuu”，
}
],
},
计算：{}，
方法：{
createStr（项目）{
item.newStr=item.str；
item.newStr=item.newStr.replace（“#####”，item.current）；
return item.newStr；
},
更新（项目、word、idx）{
item.current=单词；
此.$set（this.items，idx，item）；
}
}
});
.span1{
颜色：蓝紫色；
}





{{word}}



好的，为了更轻松地解决您的问题并分离关注点，我通过设置一个模板并将当前值存储在每个元素“状态”中找到了一个解决方案

HTML:






{{word}}




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;      
    }

  }
});

var example1=新的Vue({
el:“#示例”，
数据：{
默认替换：“\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu，
项目：[{
selectedOption:null，
模板：“这是####。”，
名单：[“弗兰克”、“伊娃”]
},
{
selectedOption:null，
模板：“我不是。”，
清单：[“乔治”、“约翰”、“马克”]
}
],
},
计算：{}，
方法：{
createStr（项目）{
var listItem=（item.selectedOption！=null）？item.list[item.selectedOption]：this.defaultReplacement；
return item.template.replace（“####”，listItem）；
},
更新（第j项）{
item.selectedOption=j；
}
}
});

下面是一个工作示例：
首先尝试使您的数据对象处于反应状态，以便Vue可以观察到对项目数组的更改：

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

请看本页底部的示例：
您确定正在正确更新
项目
数组吗？（请参阅。）如果Vue不知道数组已更新，它将不知道
createStr（）
中的旧值已无效。谢谢，但我想要一个不必添加
current
属性的解决方案
data: function () {
    return {
        items: [
            {
                str: 'This is ###.',
                list: ['Frank', 'Eva']
            },
            {
                str: 'I am not ###.',
                list: ['George', 'John', 'Mark']
            }
        ]
    }
},