v-loop 中的 v-model 出现在文本字段中，但没有任何变化

Question

我正在尝试遍历对象数组以创建输入字段列表，一切正常，除了 v-model，它只是出现在文本字段中但没有任何改变，我已经看到了很多这里有类似的问题，但 none 的答案有效

我的根组件：

<template>
<div class="container">
    <add-product :inputs="inputs"></add-product>>
</div>
</template>

<script>

export default {
data(){
    return{
        inputs: [
            {id: '1', label: 'name', type: 'text', model:'name'},
            {id: '2', label: 'description', type: 'text', model: 'desc'},
            {id: '3', label: 'price', type: 'text', model: 'price'},
            {id: '4', label: 'size', type: 'text', model: 'size'},
            {id: '5', label: 'stock', type: 'text', model: 'stock'},

        ]
    }
},
components: {
    addProduct: AddProduct
}
}

嵌套组件：

 <template>
<transition name="fade">
    <div class="add-box">
        <div class="input--form" v-for="(input, index) in inputs" :key="index">
            <label >{{ input.label }}: </label>
            <input :type="input.type" v-model="input.model">
        </div>
    </div>
</transition>    
</template>

<script>
 export default {
props: {
    inputs: Array
},
data(){
    return{
        name: '',
        desc: '',
        price: '',
        size: '',
        stock: ''
    }
},

  </script>

Answer 1

没有任何反应的主要原因是您没有从 child 组件发出名为 input 的事件。 v-model 只是绑定值和发出事件的快捷方式，因此使用单个指令实现 two-way 数据绑定（参见 here）。

但是，您不应该尝试直接修改 children 组件中的 prop。强烈建议不要在 parent 不知情的情况下修改任何值。

一般来说，当您需要遍历值时，与其创建一个组件来处理整个数组，不如让组件处理数组中的单个值通常更好。您命名 child 组件 AddProduct 的方式表明您也希望以某种方式这样命名。所以我建议进行以下修改。

嵌套组件

 <template>
  <transition name="fade">
    <div class="add-box">
      <div class="input--form">
        <label>{{ input.label }}: </label>
        <input :type="input.type" :value="input.model" @input="onInput" />
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    input: Object,
  },
  methods: {
    onInput(event) {
      this.$emit("input", {
        ...this.input,
        model: event.target.value,
      });
    },
  },
};
</script>

Parent 分量

<template>
  <div id="app">
    <add-product
      v-for="(input, index) in inputs"
      :key="input.id"
      :input="input"
      v-model="inputs[index]"
    ></add-product>
  </div>
</template>

<script>
import AddProduct from "./AddProduct";

export default {
  name: "App",
  components: {
    AddProduct,
  },
  data() {
    return {
      inputs: [
        { id: "1", label: "name", type: "text", model: "name" },
        { id: "2", label: "description", type: "text", model: "desc" },
        { id: "3", label: "price", type: "text", model: "price" },
        { id: "4", label: "size", type: "text", model: "size" },
        { id: "5", label: "stock", type: "text", model: "stock" },
      ],
    };
  },
};
</script>

child 组件不修改 prop，仅发出具有更新值的输入 object。由于事件的名称是 input 并且道具的名称是 value，因此 v-model 将起作用。在 parent 中迭代输入数组，并为每个输入附加 v-model 指令。查找现场演示 here

v-loop 中的 v-model 出现在文本字段中，但没有任何变化

v-model in v-loop appears in text-field but nothing changes

loops

vue.js

vuejs2

components

v-model