Vue.js：将id动态添加到href元素[重复]答案

【问题标题】：Vue.js: Dynamically add id to href element [duplicate]Vue.js：将id动态添加到href元素[重复]
【发布时间】：2018-04-05 14:48:25
【问题描述】：

我是初学者。

我正在尝试在我的 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>

我试图在<a data-toggle="collapse" data-parent="#accordion" href="#{{Category._id}}"> 中将_id 提供给href，而在href 中我在上面的href 上提供<div id="{{ Category._id }}" class="panel-collapse collapse"> 标签的ID。

我该怎么做？

谢谢

【问题讨论】：

标签： html css vue.js bootstrap-4

【解决方案1】：

您不能在 vue 2 中使用插值，您需要将属性绑定到某个数据对象或使用 v-bind（或冒号简写）计算：

<a data-toggle="collapse" data-parent="#accordion" href="#{{Category._id}}"  >

我会使用computed:

new Vue({
  el: '#app',
  computed:{
    href(){
      return '#' + this.Category._id
    }
  },
  data(){
    return {
      Category: {
        _id: 1
      }
    }
  }
})

你会这样做：

<a data-toggle="collapse" data-parent="#accordion" v-bind:href="href">

这里有一个 JSFiddle 给你看：https://jsfiddle.net/ym29dd2n/

为：

<div id="{{ Category._id }}" class="panel-collapse collapse">

都是一样的，只是直接绑定id即可：

<div v-bind:id="Category._id" class="panel-collapse collapse">

【讨论】：

【解决方案2】：

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

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

【讨论】：

试过但还是不行。