vuejs how to dynamically change data in the object

Question

I've got an array as below:

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'}
      ...
   ]
}

My intention is to output array in template as html. My array is some kind of reusable template, so I need somehow to output the right data.

I tried to use computed property with ${this.address} but with no luck.

Can anyone more experienced show me how to do it?

edit:

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

this should show 'Company address: London, other info1, Company telephone: 0044 345 6576 543422, other info2, text3, ...' .

Answer 1

If I understand the problem correctly, the issue here is that you want to replace part of the text in each item with a data value. In order to do that, you need to know what to replace it with, and where to put it.

Here is a very basic example of one way you might do that.

 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> 

In this example, I added the text [placeholder] in each string for the place where you want to insert the text (but it could be any pattern, just something that is serving as a placeholder for where you will insert the text). I also added a property to each item, dataField , that defines what data property to use to replace the placeholder text.

Answer 2

Please this is not an array at all. This structure is more of an object .In this you should separate all of your identifiers by a ","(comma).so you should have

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

And to access data let's say address we use:

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

where 0 is the index of the items object and this refers to the global created object