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>

这应该显示＆＃39;公司地址：伦敦，其他信息1，公司电话：0044 345 6576 543422，其他信息2，文本3，...＆＃39; 。

Answer 1

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

以下是您可能采用的一种方式的基本示例。

＆＃13;

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])}
  }
})

＆＃13;

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

＆＃13;

在这个示例中，我在每个字符串中为要插入文本的位置添加了文本[placeholder]（但它可能是任何模式，只是作为服务的内容一个占位符，用于插入文本的位置）。我还为每个项dataField添加了一个属性，用于定义用于替换占位符文本的数据属性。

Answer 2

请这不是一个阵列。这个结构更像是一个对象。在这里你应该用＆＃34;，＆＃34;（逗号）分隔你的所有标识符。所以你应该有

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

要访问数据，请说出我们使用的地址：

this.address;//to access address
this.items[0].text;

其中0是items对象的索引，this是指全局创建的对象

vuejs如何动态更改对象中的数据

2 个答案: