如何在 vue.js 中渲染列表？答案

【问题标题】：How to render the list in vue.js?如何在 vue.js 中渲染列表？
【发布时间】：2019-05-26 03:34:51
【问题描述】：

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

列表渲染没问题，直到我尝试在li 标签中添加data-feature_id="@{{searched_feature.id}}"。当我添加它时，我得到了一个错误：

[Vue 警告]：编译模板时出错：......

<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.id 放入data-feature_id 属性中？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

如果您希望在 data-feature_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>

【讨论】：

【解决方案2】：

https://vuejs.org/v2/guide/list.html 咳咳*

var app = new Vue({
  el: "#app",
  data: {
    searched_features: [
      {
        id: 1,
        name: "One"
      },
      {
        id: 2,
        name: "Two"
      },
      {
        id: 3,
        name: "Three"
      }      
    ]
  },
  methods: {
    add_to_features_list(){}
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <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>
</div>

【讨论】：

【解决方案3】：

需要在属性前加上:

<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>

【讨论】：

【解决方案4】：

在属性前添加简写':'前缀'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>

查看更多https://vuejs.org/v2/api/#v-bind

【讨论】：