Vue function that inserts <br> tags for addresses

My Vue filter retrieves and combines address details with a ,

Vue.filter('address', (address, countryNames = []) => {
  const formattedAddress = [
    address?.name,
    address?.company,
    address?.add1,
    address?.add2,
    address?.town,
    address?.county,
    address?.postcode,
    countryNames[address?.countryId],
  ]

  return formattedAddress.filter((value) => value).join(', ')
})

Here is the result:

[![enter image description here][1]][1]

I am looking to insert a <br> after the name and county for this desired outcomehttps://i.stack.imgur.com/olBXS.png:

Can this be achieved through the filter?

javascriptvue.js

Answer №1

If you only want a line break after the name and country fields, and you have control to create an array of the fields, you can implement that when assigning the items to the array.

Check out this example :

new Vue({
  el: '#app',
  data: {
    address: {
      name: 'Name',
      company: 'Company',
      town: 'Town',
      country: 'Country',
      postcode: 'Postcode'
    },
    formattedAddress: null
  },
  mounted() {
    this.formattedAddress = [
      this.address.name ? this.address.name + ',<br>' : undefined,
      this.address.company ? this.address.company + ',' : undefined,
      this.address.town ? this.address.town + ',' : undefined,
      this.address.country ? this.address.country + ',<br>' : undefined,
      this.address.postcode
    ];
    
    this.formattedAddress = this.formattedAddress.filter(value => value).join(' ')
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p v-html="formattedAddress"></p>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Running Selenium tests are not able to initiate Javascript ajax requests

I'm currently troubleshooting a scenario using Selenium that involves the following steps: - When a user inputs text into a textarea, an ajax request is sent, which then adds the text to the database (implemented using django and processed in view.py) ...

javascriptjqueryajaxdjangoselenium

Is there a way to dynamically modify the email content with the Gmail API using JavaScript?

I have received the message body and now I need to make some updates to it. When I try using this login/code, I encounter a 400 error. I believe the issue lies in the body parameter of the request. Can someone please assist me with this? var token = loca ...

javascriptgmail-api

altering the directory for bower installations on specific repositories exclusively

Recently, I've been experimenting with Bower and at the same time exploring Polymer. If you want to download polymer elements using bower, you can use the following command: bower install --save PolymerElements/iron-image I assume there's a sp ...

javascriptpolymerbowerpackage-managers

The property 'enabled' is not a standard feature of the 'Node' type

Within the code snippet below, we have a definition for a type called Node: export type Node<T> = T extends ITreeNode ? T : never; export interface ITreeNode extends TreeNodeBase<ITreeNode> { enabled: boolean; } export abstract class Tre ...

javascripttypescript

Guide on transmitting data between NextJS and MongoDB

I'm facing an issue where the data from a form is being sent to MongoDB as undefined using nextJS and MongoDB. NewPlayerPage component: const newPlayerPage = (props) => { console.log('props: ' + props); const handleAddPlayer = a ...

javascriptreactjsmongodbnext.js

If a 404 error is encountered, Vue will automatically redirect the user back to the home page

In my Vue application, I have set up the following routes: export default new Router({ mode: 'history', routes: [ { path: '/', name: 'input', component: Input }, ...

vue.jsvue-router

Maintaining the position of the screen as you type in information that is located outside of the container

I am encountering an issue with the input/text-area element in absolute position extending halfway outside the container. The screen position seems to follow the caret as I type, but I'd prefer to keep writing and have part of the text hidden beyond t ...

javascriptjqueryhtmlcss

Utilizing AngularJS to Extract JSON Data from Gzipped Files Stored Locally via Ajax

Currently, I am attempting to retrieve and read a JSON file that is stored in data.gz using AngularJS's $http service. However, when I make the request, all I get back are strange symbols and characters as the response. My application is being run loc ...

javascriptangularjsajaxgzip

What are the best ways to maximize a web worker's ability to handle multiple tasks at once

I'm currently working on implementing a Web-Worker to handle its state while also managing multiple asynchronous requests. worker.ts file let a =0; //state of the worker let worker=self as unknown as Worker; worker.onmessage =(e)=>{ console ...

javascriptnode.jstypescriptweb-workerdeno

Retrieve the most recent information based on the ID from an object by utilizing timestamps within Angular 6

I have an array of objects stored in the 'component' variable component=[{id:1,date:'20-10-2020'},{id:1,date:'13-01-2020'},{id:2,date:'30-03-2020'}] Within this array, there are 2 objects with the same 'id&apos ...

javascriptangularfilter

Tips for Isolating and Manipulating a Single Element in Array.map() with REACT.JS

Is there a way to change the style of a specific element in an array without affecting others when a button is clicked? I've been struggling with this because every time I try, it ends up changing all elements instead of just the one that was clicked. ...

javascriptreactjsjsx

If there are no visible layers, OpenLayers will not recognize zoom scroll events

I have observed that when all OpenLayers.Layers are set to invisible, I lose the ability to zoom in and out using the mousewheel. Although I can still use the OpenLayers.Control.Zoom buttons, the mouse wheel functionality is disabled. Is there a way to de ...

javascriptopenlayers

Unexpected error occurred when attempting to fetch the jQuery value of the radio button: "Unrecognized expression syntax error"

I am facing an issue while trying to extract the value of a radio button using $("input[@name=login]"); I keep getting an "Uncaught Syntax error, unrecognized expression" message. To view the problem, visit http://jsfiddle.net/fwnUm/. Below is the complet ...

javascriptjquery

Is it better to dynamically generate HTML elements or to just directly paste complete fragments in the code?

After manipulating the DOM and injecting AJAX content, I often find myself filling in the new content into a copied HTML fragment, then populating it with the updated information before using $().html() to insert the modified code back into the DOM. The ex ...

javascripthtmlajaxdom

Is it advisable to send a response in Express.js or not?

When working with Express.js 4.x, I'm unsure whether to return the response (or next function) or not. So, which is preferred: Option A: app.get('/url', (req, res) => { res.send(200, { message: 'ok' }); }); Or Option B: ...

javascriptnode.jsexpresstypescript

What could be the reason for the inability to install Angular JS 2?

Setting up Angular 2 for experimentation on my VPS has been quite a challenge. The initial steps can be found here. Upon trying the first command: $ npm install -g tsd@^0.6.0 I encountered success. However, the second step led to an error: tsd install ...

javascriptangularjsnode.js

Managing server errors when utilizing Observables

i am currently developing an Angular 2 application and part of it includes a login feature that utilizes this service. import { Http, Response } from '@angular/http'; import {Injectable} from '@angular/core'; import 'rxjs/add/op ...

javascriptangularjsangularangular2-services

Add a class to a button in an Angular btn-group if a specific string is found within an

I am currently working on a project where I have multiple buttons that need to toggle an active class when selected in order to change their color. Below is a snippet of what I have: In the array called 'selected', I have: this.selected = [&ap ...

javascriptangulartypescript

Is it possible to showcase a dropdown list within a constantly changing table?

I have a table code snippet that I need help with <fieldset class="tabular"><legend><%= l(:redmine_taskjuggler) %></legend> <%= labelled_fields_for(@issue) do |f| %> <div id="taskjuggler" class="attributes"> <div cl ...

javascripthtmlruby-on-railsinnerhtml

Implementing OAuth2 in a Microservices architecture to establish a user account

In my current setup, I am utilizing a React Application along with a separate Express API. My goal is to allow users to register through my React app. To do this, I believe the oauth2 flows should follow these steps: Prompt the user for information (suc ...

javascriptnode.jsreactjsexpressoauth-2.0