'vuejs's mustache doesn't work in v-for when object inside array

I'm a (huge) beginner in vuejs & I try to use mustache {{}} like this, to render elements of an array, no problem, but if i try this with an array that contains an object, it doesn't work.

Is there a problem in my code, or it is just impossible & i need to use an other v- that i dont know?

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

    object1: {
      type: "ball",
      couleur: "red",
      numero: 1
    },

    object2: {
      type: "house",
      couleur: "blue",
      numero: 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;
}

.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);
}

.titre-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="titre-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>

Solution 1:^[1]

Use this when you call a declared variable in the data. See the snippet below:

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

    object1: {
      type: "ball",
      couleur: "red",
      numero: 1
    },

    object2: {
      type: "house",
      couleur: "blue",
      numero: 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);
}

.titre-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="titre-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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Yong

'vuejs's mustache doesn't work in v-for when object inside array

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]