Removing text from title in an array using Vue

Question

I am trying to replace the text "this | " with "" from the titles in an array.

What is the best way to do this?

Any help would be greatly appreciated :)

my js code:

let Feed=require('rss-to-json')
Feed.load('http://localhost:3000/news', function (err, content) {
  let appTitleList = new Vue({
    el: '#news',
    data: {
      rssItems: content.items
    },
    methods:{
      removeFunction: function () {
       this.content.title = this.content.title.replace("this | ", "");
    }
  })
})

the html:

         <div class="card" id="news">
            <ul class="list-group list-group-flush">
                <li class="list-group-item" v-for="item in rssItems" > 
                    <b>{{ item.title }}</b>
                    <p>{{ item.description }}</p>
                </li>
            </ul>
        </div>

"titles in an array" which array are you referring to here? could you please add a few sample data about how that array looks like? Also, do you want to replace it from all objects title property inside the array? — palaѕн
– palaѕн, Commented Apr 10, 2020 at 17:37
that is one item in the array, apologies for the unkind formatting — cgd
– cgd, Commented Apr 10, 2020 at 17:40
This doesn't seem like an array but more like an XML. Also, inside title there no this | but you have News24.com | instead? — palaѕн
– palaѕн, Commented Apr 10, 2020 at 17:42

twharmon · Accepted Answer · 2020-04-10 18:35:31Z

1

I don't see what this.content is. I don't see where you are using removeFunction, but if you are, try this:

removeFunction: function () {
    const rssItems = [...this.rssItems]
    for (const item of rssItems) {
        item.title = item.title.replace("this | ", "");
    }
    this.rssItems = rssItems
}

Alternatively, mutate the rssItems before setting them in the state, and maybe you won't need the removeFunction.

data: {
  rssItems: content.items.map(i => ({
    ...i,
    title: i.title.replace("this | ", "")
  }))
}

edited Apr 10, 2020 at 18:35

answered Apr 10, 2020 at 17:51

twharmon

3,7905 gold badges27 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

cgd Over a year ago

Thank you for this, your alternative method worked! I had to edit it slightly and use the following, data: { rssItems: content.items.map(i => ({ ...i, title: i.title.replace("News24.com | ", ""), }) )}

cgd Over a year ago

quick question, If there were multiple things to replace in the title, what would be the best approach using your alternative?

twharmon Over a year ago

Add another replace: title: i.title.replace("News24.com | ", "").replace("Other Thing", "").

cgd Over a year ago

You are a Super Star! Have a great weekend all!

twharmon Over a year ago

@cgd You can vote or accept an answer if it helped.

tony19 · Accepted Answer · 2022-07-16 01:19:30Z

1

This can be a possible solution: fetching your API's posts when the Vue.JS instance is created, mutating the related titles and enqueue each post.

<head>
... your imports from CDN
</head>

<body>
   <div id="app">
      <div class="card" id="news">
         <ul class="list-group list-group-flush">
            <li class="list-group-item" v-for="item in items"> 
               <b>{{ item.title }}</b>
               <p>{{ item.description }}</p>
            </li>
         </ul>
      </div>
   </div>

   <script>
   new Vue({
      el: '#app',
      data () {
         return {
            items: []
         }
      },
      created () {
         Feed.load('your-api-endpoint', (err, content) => {
            // TODO: error handling...

            for (let i = 0; i < content.items.length; i++) {
               const item = content.items[i];

               // Mutate the title and enqueue the post
               item.title = item.title.replace('Title | ', '');
               this.items.push(item);
            }
         });
      }
   })
   </script>
</body>

Also, watch out that the field data in the Vue.JS instance must be a function, not an object. More about this, here.

edited Jul 16, 2022 at 1:19

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 10, 2020 at 17:57

user13278024

2 Comments

cgd Over a year ago

thank you Federico, I couldn't get yours to work with my code, but I thank you nevertheless :)

user13278024 Over a year ago

Happy to be helpful.

Collectives™ on Stack Overflow

Removing text from title in an array using Vue

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related