html - Vue.js:动态添加 id 到 href 元素

<分区>

我是初学者。

我试图在我的 href 标签中动态添加 id，但它不起作用。

这是我的代码。

  <div class="col-md-6"  v-for="Product in data">
      <div class="panel panel-default" >
          <div class="panel-heading">
              {{ Product.name }}
          </div>
          <div class="panel-body" v-for = "Category in Product.Categories">
              <div class="panel-group" id="accordion">
                  <div class="panel panel-default">
                      <div class="panel-heading">
                          <h4 class="panel-title">

                              <!--SEE HREF BELOW -->
                              <a data-toggle="collapse" data-parent="#accordion" href="#{{Category._id}}"  >
                                   {{ Category.name }}</a>
                           </h4>
                       </div>

                       <!-- SEE ID BELOW AS WELL -->
                       <div id="{{ Category._id }}" class="panel-collapse collapse">
                           <div class="panel-body"></div>
                       </div>
                 </div>
            </div>    
       </div>
 </div>

我正在尝试将 _id 赋予 <a data-toggle="collapse" data-parent="#accordion" href="#{{Category._id}}"> 中的 href在 href 中，我给出了 <div id="{{ Category._id }}" class="panel-collapse collapse"> 的 ID在上面的 href 上标记。

我该怎么做？

谢谢

最佳答案

试试这个: :href="`#${Category._id}`"

冒号告诉 Vue 将值解释为 JavaScript，而不是字符串。反引号正在进行字符串插值，因此您可以获得前面的哈希值。

关于html - Vue.js:动态添加 id 到 href 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46916725/