Commence the element on a fresh line

I am looking to format the code below so that the .filter-containers are displayed next to each other in rows. If a .filter-container has a .header-container, it should start on a new line and the remaining .filter-containers will continue to sit next to it on the new line, and so forth.

new Vue({
  el: "#app",
  data: {
        options: [
          {
            Id: 80,
            group: { GroupName: "MatrixDesc" },
            column: { ColumnAlias: "ReviewStatus" },
          },
          { Id: 81, group: { GroupName: "" }, column: { ColumnAlias: "AOI" } },
          {
            Id: 82,
            group: { GroupName: "" },
            column: {
              ColumnAlias: "Location",
            },
          },
          {
            Id: 83,
            group: { GroupName: "Header2" },
            column: { ColumnAlias: "Chemical" },
          },
          {
            Id: 84,
            group: { GroupName: "" },
            column: {
              ColumnAlias: "CollectionDate",
            },
          },
        ],
      },
  
})
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03616c6c77707771627343372d302d32">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">  
  <div class="d-flex flex-wrap align-items-end mx-3">
    <div v-for="(fdata, index) in options" :key="index">
      <span v-if="fdata.group != null">
        <div v-if="fdata.group.GroupName" class="header-container">
          <h4>{{ fdata.group.GroupName }}</h4>
        </div>
        <div class="Filter-with-header">
          <div class="Filter-info-wrapper">
            <input
              type="text"
              spellcheck="false"
              v-model="fdata.column.ColumnAlias"
            />
          </div>
        </div>
      </span>
    </div>
  </div>
</div>
Desired layout:

https://i.sstatic.net/NL4lT.png

Current layout:

https://i.sstatic.net/aCrJv.png

htmlcssvue.jsstyling

Answer №1

Is it possible to adjust the options data? It would be more logical for all items that should be grouped together to share the same group name. Then, a computed property can extract an array of unique group names. Subsequently, each unique group can be rendered using v-for, and within each group, render all options that match that group name using another v-for loop.

<div id="app">
  <div v-for="group in uniqueGroups" class="header-container row mx-3">
    <div class="col-12">
      <h4>{{ group }}</h4>
      <div  class="row mx-0 my-2">
        <div v-for="(fdata, index) in options" :key="index">
          <template v-if="fdata.group != null && fdata.group.GroupName === group">
            <div class="Filter-with-header">
              <div class="Filter-info-wrapper">
                <input
                  type="text"
                  spellcheck="false"
                  v-model="fdata.column.ColumnAlias"
                />
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</div>

new Vue({
  el: "#app",
  data: {
    options: [
      {
        Id: 80,
        group: { GroupName: "MatrixDesc" },
        column: { ColumnAlias: "ReviewStatus" },
      },
      { 
        Id: 81, 
        group: { GroupName: "MatrixDesc" }, 
        column: { ColumnAlias: "AOI" }
      },
      {
        Id: 82,
        group: { GroupName: "MatrixDesc" },
        column: { ColumnAlias: "Location" },
      },
      {
        Id: 83,
        group: { GroupName: "Header2" },
        column: { ColumnAlias: "Chemical" },
      },
      {
        Id: 84,
        group: { GroupName: "Header2" },
        column: { ColumnAlias: "CollectionDate" },
      },
    ],
  },
  computed: {
    uniqueGroups() {
      return [...new Set(this.options.map(o => o.group.GroupName))]
    }
  }
})

example jsfiddle

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

Exploring the world of Vue.js and Quarkus: creating, developing,

As a beginner, I have many questions, but one that is currently on my mind relates to a project I am working on. The company I am with is developing a program with the backend built in Quarkus (Java) and the frontend in Vue.js. My query is whether these tw ...

javavue.jsdeploymentdevelopment-environmentquarkus

Two adjacent divs merge into the following div

Hey everyone, I'm facing an issue that I can't seem to figure out. I know it's probably something very simple, but as a beginner, I'm struggling... Every time I use the float:left command, the elements with classes .con-icon and #con-i ...

htmlcss

ways to change the font color style of a header element using css

Below is the HTML code that I need to work with: <h5 class="post-title">Welcome To The Site</h5> I am attempting to change the font color to red using this CSS: .post-title{ color:red ! important; } However, my attempt was unsuccessful ...

htmlcss

Is there a way to blend together two elements within a Bigcommerce theme seamlessly?

Recently, I have been tasked with customizing a Bigcommerce theme for a client. While I am not very experienced with Bigcommerce and only have basic knowledge of php, I have encountered an interesting challenge with the current theme header setup. The exis ...

phphtmlbigcommerce

What is the reason for the additional space and irregular alignment of my divs when utilizing the 960 grid system?

One issue I'm facing is that elements within divs are aligning randomly without responding to any alignment tags. Additionally, some divs are creating extra space above or below their elements. I am using the 960 grid system and have not made any chan ...

htmlcss960.gs

What is the best way to retrieve the previously chosen value from one dropdown and populate it into another dropdown when

I have 3 choices available. When the user selects the third option, a jQuery onchange event is triggered to send the variable to another PHP file for database validation based on the selected id. The challenge lies in how I can also include the variables f ...

javascriptphpjqueryhtmlmysql

"Exploring the versatility of using variables in jquery's .css

I’m facing an issue where I need the rotation of a div to be based on the value stored in "anVar." This is what I currently have: function something() { $('.class').css('-webkit-transform:rotate('anVar'deg)') } The desi ...

javascriptjquerycssvariablesrotatetransform

number of elements chosen for an xpath query using the chrome console

Is there a way to find the number of nodes selected with an xpath in the Chrome console? I managed to select a group of nodes using the xpath: $x("//*[@rel='noopener noreferrer']") in the Chrome console. However, I am unable to determine the c ...

cssseleniumxpathgoogle-chrome-devtools

Tips for assigning a className to an element within a 'v-for' loop

This is the code snippet I am currently working with: <li v-for="(link, i) in shareLinks" :key="i" class='link box'> <div class=`icon ${link.name}`></div> </li> Is there a way to assign the class '${link.name}& ...

vue.jsnuxt.js

What steps can be taken to launch a website in Chrome's headless mode while navigating around any blockers of the mode itself

Below is the XPATH I am using to extract price information from various websites, except for Myntra. This XPATH works perfectly on my local Windows system with Selenium, Python3 version, and Chrome driver. Driver path: driver = webdriver.Chrome("/usr ...

csspython-3.xseleniumxpathscrape

Ways to track the visit data for different languages in Google Analytics when the language is not included in the URL

On my website, I track Google Analytics by adding the tracking code to the header. The standard implementation of GA tracking is as follows: ga('create', 'UA-483951-1', 'auto'); ga('send', 'page ...

phphtmlcodeignitergoogle-analyticsstatistics

Is it possible to incorporate @font-face with Ruby on Rails?

I've been struggling to implement my custom font in a Rails project. The font files are located in app/assets/fonts/. I made changes to the CSS: # in app/assets/stylesheets/application.css @font-face { font-family: 'fontello'; src: u ...

cssruby-on-railsrubyfonts

Guide to changing the Google Analytics tracking code on your website by hand

Several months back, the Google Analytics tracking code on a website was suddenly altered, resulting in the loss of data collection by Google. The fix for this issue involves updating the code on each page of the site to the new version, but doing so manua ...

htmlgoogle-analyticstracking

ERESOLVE encountered issues resolving the dependency tree for a project using .NET Core 3.1 and Vue.js framework

I encountered an issue while trying to build my application. The error message is as follows: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class ...

vue.jsnpmasp.net-core-3.1

Ways to reduce the size of a Select box when the option text is too lengthy

How can I reduce the size of the select box by splitting the lines of the options I attempted to modify the CSS with: select { width:100px; } However, only the select element was affected. The options remained the same size. My goal is to have ...

htmlcss

What is the best way to showcase JSON keys in Vue.js?

I have a JSON structure that resembles the following: { "data": [ { "name": "someName", "link": "http://somelink.com", ], "relevantArray": [ { "keyIWant": ...

javascriptjsonvue.js

Ways to eliminate the lower boundary of Input text

Currently, I am working on a project using Angular2 with Materialize. I have customized the style for the text input, but I am facing an issue where I can't remove the bottom line when the user selects the input field. You can view the red line in t ...

javascriptcssangularsassstyles

Vue's computed property utilizing typed variables

I am trying to create a computed array of type Todo[], but I keep encountering this specific error: No overload matches this call. Overload 1 of 2, '(getter: ComputedGetter<Todo[]>, debugOptions?: DebuggerOptions | undefined): ComputedRef<T ...

javascripttypescriptvue.js

flexbox with equal width and height

I have two questions regarding flexboxes but I am unable to find the answers. How can I create 4 boxes with equal width and height, without using the viewport? For instance, if I create a box with 50% width, I want the height to be equal to the width. ...

htmlcss

The beauty of Android Studio: Gradients

While working on my Android Studio project, I designed a UI in Figma that included a rectangle with multiple gradients and a solid color. Now I'm wondering how to recreate this exact rectangle in Android Studio. Here is the CSS code for reference: ba ...

javaandroidcssxml