javascript - vuejs如何动态改变对象中的数据

Question

我有一个数组如下:

return {
   address: 'London'
   telephone: '0044 345 6576 543422'
   items: [
      {active: true, text: 'Company address: xyz, other info1'},
      {active: true, text: 'Company telephone: xyz, other info2,'},
      {active: true, text: 'text3'},
      {active: true, text: 'text4'},
      {active: true, text: 'text5'}
      ...
   ]
}

我的目的是将模板中的数组输出为html。我的数组是某种可重用的模板，所以我需要以某种方式输出正确的数据。

我尝试将计算属性与 ${this.address} 一起使用，但没有成功。

有经验的人可以告诉我如何做吗？

编辑:

<template>
  <div v-for="item in items">
     {{item.text}}
  </div>
</template>

这应该显示“公司地址:伦敦，其他信息1，公司电话:0044 345 6576 543422，其他信息2，文本3，...”。

Answer 1

如果我正确理解问题，这里的问题是您想要用数据值替换每个项目中的部分文本。为了做到这一点，您需要知道用什么来替换它，以及把它放在哪里。

这是一个非常基本的示例，说明了您可以这样做的一种方法。

console.clear()

new Vue({
  el: "#app",
  data(){
    return {
      address: 'London',
      telephone: '0044 345 6576 543422',
      items: [
      {active: true, text: 'Company address: [placeholder], other info1', dataField: 'address'},
      {active: true, text: 'Company telephone: [placeholder], other info2,', dataField: 'telephone'},
      {active: true, text: 'text3'},
      {active: true, text: 'text4'},
      {active: true, text: 'text5'}
      ]
    }
  },
  computed:{
    activeItems(){
      return this.items.filter(item => item.active === true)
    }
  },
  methods: {
    getInterpolatedText(text, field) {return text.replace("[placeholder]", this[field])}
  }
})

<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="app">
  <div v-for="item in activeItems">
    {{getInterpolatedText(item.text, item.dataField)}}
  </div>
</div>

在此示例中，我在每个字符串中为要插入文本的位置添加了文本 [placeholder](但它可以是任何模式，只需用作插入文本位置的占位符的东西)。我还为每个项目添加了一个属性 dataField，它定义了用于替换占位符文本的数据属性。