Question

我有一个使用JavaScript / Vue的项目，其中我通过映射每个项目（由", "连接）写出成分。相反，我想将每个项目写成一个列表，但是不确定如何去做。我现在拥有的代码如下：

<li>
  {{ order.ingredients.map(item=>item["ingredient_"+ lang]).join(", \n")}} 
</li>

是否有很好的方法？

Answer 1

怎么样：

img

在<ul> <li v-for="(item,i) in order.ingredients" :key="i">{{"ingredient_"+item.lang}}</li> </ul>指令上签出文档，可以在数组上进行内联迭代，然后您可以访问可以显示/显示和操作的每个元素。

Answer 2

我不确定您的HTML结构是什么，但是使用v-for directive的一种方法就是这样。

const vue = new Vue({
  el: "#app",
  data() {
    return {
      order: {
        ingredients: ['orange', 'apple', 'pear', 'banana']
      }
    }
  }
})

ul {
  list-style: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul v-for="(ingredient,index) in order.ingredients" :key="index">
    <li> {{ingredient}} </li>
  </ul>
</div>

将项目映射到列表

2 个答案: