具有二维数组动态名称的Vuejs v模型

qcbq4gxm 于 2023-02-19 发布在 Vue.js

关注(0)|答案(1)|浏览(129)

如何使用2个动态变量命名动态v模型？如果我只使用1个动态变量，如v-model="shirt_count[brand]"，它可以工作，但使用v-model="shirt_count[brand][color]"不工作，代码如下：

<template>  
<div v-for="brand in brands" >
    <div v-for="color in colors" >
        <input type="text" v-model="shirt_count[brand][color]" />
    </div>
</div>
</template>
<script>
export default {
    props: ['brands', 'colors'],
    data(){
       return {
           shirt_count: []
       }
    }
}
</script>

我想有一个输出像下面，这就是为什么我需要它2维：

shirt_count: [
  'brand_a': [
       'red': 5
       'blue': 4
   ],
  'brand_b': [
       'red': 1
       'blue': 3
  ]
]

vue.js

来源：https://stackoverflow.com/questions/75458911/vuejs-v-model-with-2-dimensional-array-dynamic-name

1条答案

按热度按时间

gfttwv5a1#

你可以使用一个字符串模板文字，动态变量作为占位符。

<template>  
  <div v-for="brand in brands">
    <div v-for="color in colors">
      <input type="text" :value="shirt_count[`${brand}_${color}`]" @input="updateShirtCount($event, brand, color)" />
    </div>
  </div>
</template>

<script>
export default {
  props: ['brands', 'colors'],
  data() {
    return {
      shirt_count: {}
    };
  },
  methods: {
    updateShirtCount(event, brand, color) {
      this.$set(this.shirt_count, `${brand}_${color}`, event.target.value);
    }
  }
};
</script>

赞(0）回复(0）举报 2023-02-19

我来回答

具有二维数组动态名称的Vuejs v模型

1条答案

相关问题

热门标签

最新问答