如何显示数组vuejs的值

Question

<div id="app"> 
    <div v-for="(value, index) in additionalOptions">
        <input type="text" v-model="additionalOptions[0]" />
    </div>
</div>

var app = new Vue({
    el: '#app',
    data: {
        additionalOptions: [{
            "side_dish": ["Potato", "Apple"]
        }]
    },
});

响应是[对象对象]

请帮忙，提前致谢。

Answer 1

假设您想通过 side_dish 显示输入字段：

• additionalOptions 是一个只有一个元素的数组，所以你必须 select [0] 然后得到 side_dish 属性
• 用v-for
迭代side_dish

代码：

<div id="app"> 
    <div v-for="value in additionalOptions[0].side_dish">
        <input type="text" v-model="value" />
    </div>
</div>

Fiddle

Answer 2

使用对象而不是数组。

const app = new Vue({
  el: "#app",
  data() {
    return {
      additionalOptions: [{
        side_dish: {
          0: "Potato",
          1: "Apple"
        }
      }]
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="app">
    <div v-for="option in additionalOptions" :key="option">
        <div v-for="(side, side_index) in option.side_dish" :key="side_index">
          <input type="text" v-model="option.side_dish[side_index]" />
        </div>
    </div>
    
     {{additionalOptions}}
</div>