Блог

Я только начал учиться Vue.js , и я сейчас прохожу курс Vue Mastery для начинающих. По какой-то причине мой div с id app не содержит элементов, когда я проверяю его в Chrome, хотя, очевидно, это происходит в моем html-коде. Я также обнаружил, что когда я комментирую тег script, содержащий мой основной файл JavaScript, на странице появляются html-элементы. Пожалуйста, помогите!

main.js

 const app = Vue.createApp({
    data() {
        return {
            cart:0,
            product: 'Soks',
            image: './assets/images/socks_blue.jpg',
            inStock: true,
            details: ['50% cotton', '30% wool', '20% polyester'],
            variants: [
              { id: 2234, color: 'green', image: './assets/images/socks_green.jpg' },
              { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg' },
            ]
        }
    },
    methods: {
        addToCart() {
            this.cart  = 1
        },
        updateImage(variantImage) {
            this.image = variantImage
        }
    }
})
 

index.html

 <div id="app">
  <div class="nav-bar"></div>

  <div class="cart">Cart({{ cart }})</div>
  
  <div class="product-display">
    <div class="product-container">
      <div class="product-image">
        <img v-bind:src="image">
      </div>
      <div class="product-info">
        <h1>{{ product }}</h1>
        <p v-if="inStock">In Stock</p>
        <p v-else>Out of Stock</p>
        <ul>
          <li v-for="detail in details">{{ detail }}</li>
        </ul>
        <div v-for="variant in variants" :key="variant.id" @mouseover="updateImage(variant.image">{{ variant.color }}</div>
        <button class="button" @click="addToCart">Add to Cart</button>
      </div>
    </div>
  </div>
</div>

<!-- Import App -->
<script src="./main.js"></script>

<!-- Mount App -->
<script>
  const mountedApp = app.mount('#app')
</script>
 

Скриншот из index.html

Приложение должно быть смонтировано (о, я вижу, вы делаете это сейчас …):

 const app = Vue.createApp({
...
})
app.mount("#app");
 

И в шаблоне есть незакрытые круглые скобки:

 @mouseover="updateImage(variant.image)"
 

Вот демонстрация, если она вам нужна