CODEWITHSUNDEEP
javascriptvue.js
gileneusz
gileneusz

Reputation: 1495

vuejs how to dynamically change data in the object

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, ...' .

Upvotes: 0

Views: 2623

Answers (2)

Bert
Bert

Reputation: 82499

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/[email protected]"></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.

Upvotes: 1

Ditrix 36
Ditrix 36

Reputation: 16

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

Upvotes: 0

Related Questions