How to render the list in vue.js?

Question

I'm trying to render the list with vue.js. The data has come from api call.

List rendering is ok, until I try to add data-feature_id="@{{searched_feature.id}}" in li tag. When I add it, I got an error:

[Vue warn]: Error compiling template:......

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

How can I put searched_feature.id in data-feature_id attribute?

Mahmoud · Accepted Answer · 2018-12-28 09:53:03Z

2

You need to add : before the attribute

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

edited Dec 28, 2018 at 9:53

answered Dec 28, 2018 at 9:41

Mahmoud

94613 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tang Yun · Accepted Answer · 2018-12-28 09:56:54Z

0

if you wish to add the '@' in front of the data-feature_id attribute:

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

answered Dec 28, 2018 at 9:56

Tang Yun

1599 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-14 23:58:48Z

0

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

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>

edited Jul 14, 2022 at 23:58

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 28, 2018 at 9:53

Anuga

2,8271 gold badge22 silver badges30 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-15 00:57:31Z

0

Add 'v-bind:' prefix of shorthand ':' before attribute to bind dynamic data.

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

See more https://v2.vuejs.org/v2/api/#v-bind

edited Jul 15, 2022 at 0:57

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 28, 2018 at 9:52

Cong Nguyen

3,4551 gold badge26 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to render the list in vue.js?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related