Question

我是初学者。

我正在尝试在我的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中，我在上面的href上给出<div id="{{ Category._id }}" class="panel-collapse collapse">标记的ID。

我该怎么做？

由于

Answer 1

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

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

Answer 2

您无法在第2阶段使用插值，您需要将属性绑定到某个数据对象或使用v-bind（或冒号速记）计算：

cfspreadsheet

我会使用computed：

<cfset objSpreadsheet = SpreadsheetNew()>

<!--- Create and format the header row. --->
<cfset SpreadsheetAddRow( objSpreadsheet, "Location,Percent of Total Checklists,Location Total" )>
<cfset SpreadsheetFormatRow( objSpreadsheet, {bold=true, alignment="center"}, 1 )>

<!--- Populate the spreadsheet. --->
<cfset SpreadsheetSetCellValue( objSpreadsheet, 'FSC', 2, 1, "String" ) >
<cfset SpreadsheetSetCellValue( objSpreadsheet, .03, 2, 2, "Numeric" ) >
<cfset SpreadsheetSetCellValue( objSpreadsheet, 13, 2, 3, "Numeric" ) >
<cfset SpreadsheetSetCellValue( objSpreadsheet, 'OPERATIONS', 3, 1, "String" ) >
<cfset SpreadsheetSetCellValue( objSpreadsheet, 13.78, 3, 2, "Numeric" ) >
<cfset SpreadsheetSetCellValue( objSpreadsheet, 5161, 3, 3, "Numeric" ) >


<cfheader name="Content-Disposition" value="attachment; filename=LS_#Dateformat(NOW(),'MMDDYYYY')#"> 
<cfcontent type="application/vnd.ms-excel" variable="#SpreadsheetReadBinary( objSpreadsheet )#">

然后你会这样做：

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

这是一个向您展示的JSFiddle：https://jsfiddle.net/ym29dd2n/

有关：

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

它是相同的，但你可以直接绑定id：

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

Vue.js：动态地将id添加到href元素

2 个答案: