Javascript 如何在vue.js中呈现列表？

我正在尝试使用vue.js呈现列表。数据来自api调用

列表呈现是正常的，直到我尝试在

li

标记中添加

data-feature\u id=“@{{searched\u feature.id}”

。 当我添加它时，我得到一个错误：

[Vue warn]：编译模板时出错：

@{{searched_feature.name}

---

如何将

searched\u feature.id

放入

data-feature\u id

属性中？

您需要在属性之前添加：

<div class="search_feature_select">
    <ul>
        <li v-for="searched_feature in searched_features" :data-feature_id="searched_feature.id" @click="add_to_features_list">
        {{searched_feature.name}}
        </li>
    </ul>
</div>

{{searched_feature.name}

在绑定动态数据的属性之前添加'v-bind:'速记前缀'：'

<div class="search_feature_select">
  <ul>
    <li v-for="searched_feature in searched_features" 
    :data-feature_id="searched_feature.id" 
    @click="add_to_features_list">
     {{searched_feature.name}}
    </li>
  </ul>
</div>

{{searched_feature.name}

更多信息请参见咳嗽*

var-app=新的Vue({
el:“应用程序”，
数据：{
搜索功能：[
{
id:1，
姓名：“一”
},
{
id:2，
姓名：“两个”
},
{
id:3，
姓名：“三”
}      
]
},
方法：{
将_添加到_功能_列表（）{}
}
})

@{{searched_feature.name}

如果要在数据要素id属性前面添加“@”：

<div class="search_feature_select">
    <ul>
        <li v-for="searched_feature in searched_features" :data-feature_id="'@' + searched_feature.id" @click="add_to_features_list">
        {{searched_feature.name}}
        </li>
    </ul>
</div>

{{searched_feature.name}

<div class="search_feature_select">
    <ul>
        <li v-for="searched_feature in searched_features" :data-feature_id="'@' + searched_feature.id" @click="add_to_features_list">
        {{searched_feature.name}}
        </li>
    </ul>
</div>