The curly brackets in Vue.js do not function properly within a v-for loop when there is an object nested inside an array

Question

The curly brackets in Vue.js do not function properly within a v-for loop when there is an object nested inside an array

I am a novice in vuejs and I am attempting to utilize mustache {{}} to render elements of an array. It works fine for simple arrays, but when I try it with an array containing objects, it doesn't seem to work.

Is there an issue with my code, or is it simply not possible and I need to use another method that I am not familiar with?


var app = new Vue({
  el: '#app',
  data: {
    object1: {
      type: "ball",
      color: "red",
      number: 1
    },
    object2: {
      type: "house",
      color: "blue",
      number: 2
    },
    items: [object1, "hello", "world", object2]
  }
})


@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat&display=swap');
@import url('https://db.onlinewebfonts.com/c/20af36ba0a52c9a46fe2963f400bd77c?family=Dystopian+Black');
body {
  margin: 0;
  background-color: #1b1c21;
  font-family: Mont;
  user-select: none;
}
...
...


<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html lang="fr">
...
...
...

html css vue.js mustache

Answer 1

Answer №1

Remember to use the keyword this when referencing a declared variable in the data object. Take a look at the example below:

var app = new Vue({
  el: '#app',
  data: {

    object1: {
      type: "ball",
      color: "red",
      number: 1
    },

    object2: {
      type: "house",
      color: "blue",
      number: 2
    },
    items: []

  },
  created() {
    this.items = [this.object1, "hello", "world", this.object2]
  }
})

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat&display=swap');
@import url('https://db.onlinewebfonts.com/c/20af36ba0a52c9a46fe2963f400bd77c?family=Dystopian+Black');
body {
  margin: 0;
  background-color: #1b1c21;
  font-family: Mont;
  user-select: none;
}

.header {
  padding: 10px 16px;
  background: #27282c;
  margin: 0;
}

.main {
  margin: 15px;
  color: white;
}

.header img {
  height: 75px;
  width: 75px;
  margin-inline: 260px;
  margin-block: 20px;
  transition: transform .5s, background-color .5s;
  padding: 10px;
  border-radius: 10px;
}

.header img:hover {
  transform: scale(120%);
  background-color: #4d4d4d;
  transition: transform .5s, background-color .5s;
}

.icon-top {
  width: 225px;
  height: 225px;
  display: inline-block;
  filter: drop-shadow(0 0 0.5rem #2fc967);
}

.title-top {
  font-size: 320px;
  font-family: 'Bebas Neue';
  color: white;
  margin: 0;
  display: inline-block;
}

span {
  color: #2fc967;
  filter: drop-shadow(0 0 0.5rem #2fc967);
}

p {
  margin: 0;
}

.top {
  margin-bottom: 70px;
  margin-top: 70px;
  margin-left: 87px;
  line-height: 60px;
}

.text-top {
  margin: 0;
  color: white;
  font-family: 'Bebas Neue';
  font-size: 85px;
  text-decoration: drop-shadow(0 0 0.5rem #2fc967);
  margin-left: 240px;
}

.title-white {
  color: white;
}

.title-black {
  color: black;
}

.cards {
  float: left
}

.card {
  border-radius: 50px;
  background: #1b1c21;
  box-shadow: 15px 15px 30px #111215, -15px -15px 30px #25262d;
  width: 300px;
  height: 300px;
  margin: 80px;
  transition: transform .5s;
  display: inline-block;
  justify-content: center;
  justify-items: center;
}

.card:hover {
  transform: scale(1.1);
}

.card img {
  width: 75%;
  height: 75%;
  margin-inline: 12.5%
}

.card p {
  color: white;
  font-family: "Dystopian Black";
  font-size: 35px;
  text-align: center;
  line-height: 55px;
}

a {
  margin: 0 auto;
  padding: 0 auto;
  text-decoration: none;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: #2fc967;
  border-radius: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>

<html lang="fr">

<head>
  <link rel="stylesheet" href="css/style.css">
  <link rel="icon" href="images/icon.svg">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>xxxxx</title>
  <script src="js/vue.js"></script>
</head>

<body>
  <div class="app" id="app">
    <div class="top" id="top">
      <div class="title-top">
        <p>xxxxx<span>.</span></p>
      </div>
      <div class="text-top">
        <p>xxxxxx</p>
      </div>
    </div>
    <div class="header" id="header">
      <a href="xxximg src=" xxx " alt="Cours "></a>
            <a href="xxximg src="xxx" alt="Parcours"></a>
      <a href="xxx"><img src="xxx" alt="À propos"></a>
    </div>
    <div class="main" id="main">
      <div class="cards" v-for="item in items">
        <a href="https://youtube.com">
          <div class="card">
            <p>{{item}}</p>
          </div>
        </a>
      </div>
    </div>
  </div>

  <script src="js/script.js"></script>
</body>

</html>

Answer 2

Remember to use the keyword this when referencing a declared variable in the data object. Take a look at the example below:

var app = new Vue({
  el: '#app',
  data: {

    object1: {
      type: "ball",
      color: "red",
      number: 1
    },

    object2: {
      type: "house",
      color: "blue",
      number: 2
    },
    items: []

  },
  created() {
    this.items = [this.object1, "hello", "world", this.object2]
  }
})

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat&display=swap');
@import url('https://db.onlinewebfonts.com/c/20af36ba0a52c9a46fe2963f400bd77c?family=Dystopian+Black');
body {
  margin: 0;
  background-color: #1b1c21;
  font-family: Mont;
  user-select: none;
}

.header {
  padding: 10px 16px;
  background: #27282c;
  margin: 0;
}

.main {
  margin: 15px;
  color: white;
}

.header img {
  height: 75px;
  width: 75px;
  margin-inline: 260px;
  margin-block: 20px;
  transition: transform .5s, background-color .5s;
  padding: 10px;
  border-radius: 10px;
}

.header img:hover {
  transform: scale(120%);
  background-color: #4d4d4d;
  transition: transform .5s, background-color .5s;
}

.icon-top {
  width: 225px;
  height: 225px;
  display: inline-block;
  filter: drop-shadow(0 0 0.5rem #2fc967);
}

.title-top {
  font-size: 320px;
  font-family: 'Bebas Neue';
  color: white;
  margin: 0;
  display: inline-block;
}

span {
  color: #2fc967;
  filter: drop-shadow(0 0 0.5rem #2fc967);
}

p {
  margin: 0;
}

.top {
  margin-bottom: 70px;
  margin-top: 70px;
  margin-left: 87px;
  line-height: 60px;
}

.text-top {
  margin: 0;
  color: white;
  font-family: 'Bebas Neue';
  font-size: 85px;
  text-decoration: drop-shadow(0 0 0.5rem #2fc967);
  margin-left: 240px;
}

.title-white {
  color: white;
}

.title-black {
  color: black;
}

.cards {
  float: left
}

.card {
  border-radius: 50px;
  background: #1b1c21;
  box-shadow: 15px 15px 30px #111215, -15px -15px 30px #25262d;
  width: 300px;
  height: 300px;
  margin: 80px;
  transition: transform .5s;
  display: inline-block;
  justify-content: center;
  justify-items: center;
}

.card:hover {
  transform: scale(1.1);
}

.card img {
  width: 75%;
  height: 75%;
  margin-inline: 12.5%
}

.card p {
  color: white;
  font-family: "Dystopian Black";
  font-size: 35px;
  text-align: center;
  line-height: 55px;
}

a {
  margin: 0 auto;
  padding: 0 auto;
  text-decoration: none;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: #2fc967;
  border-radius: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>

<html lang="fr">

<head>
  <link rel="stylesheet" href="css/style.css">
  <link rel="icon" href="images/icon.svg">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>xxxxx</title>
  <script src="js/vue.js"></script>
</head>

<body>
  <div class="app" id="app">
    <div class="top" id="top">
      <div class="title-top">
        <p>xxxxx<span>.</span></p>
      </div>
      <div class="text-top">
        <p>xxxxxx</p>
      </div>
    </div>
    <div class="header" id="header">
      <a href="xxximg src=" xxx " alt="Cours "></a>
            <a href="xxximg src="xxx" alt="Parcours"></a>
      <a href="xxx"><img src="xxx" alt="À propos"></a>
    </div>
    <div class="main" id="main">
      <div class="cards" v-for="item in items">
        <a href="https://youtube.com">
          <div class="card">
            <p>{{item}}</p>
          </div>
        </a>
      </div>
    </div>
  </div>

  <script src="js/script.js"></script>
</body>

</html>

The curly brackets in Vue.js do not function properly within a v-for loop when there is an object nested inside an array

Answer №1

Similar questions

Unable to align divs horizontally

Zooming on a webpage is causing problems

Can you answer this straightforward query about CSS positioning?

When combining Symfony, Twig, and Semantic UI, users may encounter an issue where the background image fails to display

Choosing elements that are visible on the webpage using CSS selectors or XPath

Steps for retrieving the URL using the getDownloadURL() method

Redirect the Submit button to the specified URL from the form element

Nuxt.js framework and Three.js library are throwing a SyntaxError: Unable to utilize an import statement outside of a module

The vue.config.js file is throwing an error due to incorrect options: "build" and "dev" are not permitted in this context

The Joys of Delayed Animation with jQuery Isotope

Remove HTML formatting from excel cells and fill separate cells

What is the best way to ensure that an input field and a button stretch across the entire row in a Bootstrap form?

Overlapping Bootstrap rows in small screens

Issue with Bootstrap flash alert CSS on mobile devices is not functioning properly

Utilizing BeautifulSoup for Web Scraping (handling missing values during the scrape)

Issues with Google Fonts failing to load correctly

HTML 4.01 character and character offset attributes

Applying the active state to the link will cause it to inherit the default styles of the

Guide on executing edit form alongside file upload

Exploring Vue.js: Navigating through child components from parent component