How to display values from array 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"]
        }]
    },
});

response is [object Object]

Please help, thanks in advance.

Answer 1

Use objects instead of arrays.

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

Assuming you want to show an input field by side_dish:

• additionalOptions is an array with only one element so you must select [0] and then get the side_dish property
• iterate on side_dish with v-for

Code:

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

Fiddle