Vue组件无法渲染求助：按教程编写但组件不显示

我帮你排查了下，组件无法显示主要是两个核心问题导致的，咱们一步步来修复：

1. 组件未单独配置分隔符 #

你在根Vue实例里设置了delimiters: ['[[', ']]']，但这个配置不会自动传递给子组件。组件默认还是用Vue原生的{{ }}作为插值分隔符，而你的组件模板里全用了[[ ]]，导致Vue无法解析这些表达式，最终渲染异常。

解决方法：在product组件内部也添加相同的分隔符配置：

Vue.component('product', {
  delimiters: ['[[', ']]'], // 新增这一行，和根实例保持一致
  template: `...`,
  // 其他data、methods等配置
})

2. 模板字符串里的HTML转义错误 #

你用反引号`包裹了模板字符串，但里面的标签却写成了<和>（HTML转义字符）。模板字符串支持直接写原始HTML标签，转义后的字符会被Vue当成普通文本处理，导致组件结构解析失败。

比如把模板里的<div class='product'>改成<div class='product'>，所有标签都恢复成原始的<和>即可。

修正后的完整代码 #

JavaScript部分 #

Vue.config.devtools = true; 

var app = new Vue({ 
  delimiters: ['[[', ']]'], 
  el: '#app', 
}); 

Vue.component('product', {
  delimiters: ['[[', ']]'], // 新增组件分隔符配置
  template: `<div class='product'> 
    <button class="btn btn-outline-success my-2 my-sm-0">Items [[ cart ]]</button> 
    <div class="row"> 
      <div class="col-md"> 
        <img :src=image class="rounded float-left" alt="..." style="width: 50%"> 
      </div> 
      <div class="col-md"> 
        <h1>Products: [[ title ]]</h1> 
        <p>Description: [[ description ]]</p> 
        <p v-if="inStock">In Stock</p> 
        <p v-else :class="{outOfStock: inStock == 0}">Out of stock</p> 
        <ul v-for="detail in details"> 
          <li>[[ detail ]]</li> 
        </ul> 
        <div v-for="(variant, index) in variants" :key="variant.variantId" class="color-box" @mouseover="updateProduct(variant.variantImage, index)" :style="{ backgroundColor: variant.variantColor }"> 
        </div> 
        <br> 
        <button @click="addToCart" :disabled="!inStock"> Add to Cart </button> 
      </div> 
    </div> 
  </div>`,
  data() { 
    return { 
      product: 'Essen ', 
      brand: "Muhannad Kalieh", 
      description: 'Thats my description for the socks', 
      selectedVariant: 0, 
      onSale: true, 
      details: ["Selber zubereitet", "frische Zutaten", "schmeckt geil nahuj"], 
      variants: [ 
        { variantId: 2224, variantColor: "green", variantQuantity: 15, variantImage: '/images/essen1.jpeg', sale: 1 }, 
        { variantId: 34, variantColor: "blue", variantQuantity: 0, variantImage: '/images/essen2.jpeg', sale: 0 } 
      ], 
      cart: 0 
    } 
  }, 
  methods: { 
    addToCart() { 
      this.cart += 1 
    }, 
    updateProduct(variantImage, index) { 
      this.selectedVariant = index; 
    } 
  }, 
  computed: { 
    title() { 
      return this.brand + ' ' + this.product; 
    }, 
    image() { 
      return this.variants[this.selectedVariant].variantImage; 
    }, 
    inStock() { 
      return this.variants[this.selectedVariant].variantQuantity; 
    } 
  } 
}); 

HTML部分（无需修改） #

<div id="app"> 
  <product></product> 
</div>

另外，以后遇到这类问题可以先打开浏览器控制台（F12）看看有没有报错提示，Vue通常会给出非常明确的错误信息，能帮你快速定位问题~

内容的提问来源于stack exchange，提问作者dwdawdawdaw