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"]
        }]
    },
});

响应是[object Object]

请提前帮助，谢谢。

Answer 1

假设您要按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>

Fiddle

Answer 2

使用对象而不是数组。

＆＃13;

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

＆＃13;

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

＆＃13;

如何在vuejs绑定中更改数组键

2 个答案: