如何从数组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

使用对象而不是数组。

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>

Answer 2

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

• additionalOptions是一个数组，只有一个元素，因此您必须选择[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>

小提琴