javascript - 修改数据后 Vue.js 输入值不更新

Question

我刚开始使用 Vue.js，但遇到了 Vue.js 响应式(Reactive)数据源的一些问题。

以下代码应该能够在父元素中添加和删除包含文本字段和文本区域的行。

元素 View .vue

<template>
    <div>
        <label></label>
        <br>
        <small class='text-muted'></small>
        <br>
        <div class='marks_content'>
            <div class='row' v-for="(item, index) in marks" v-bind:key="index">

                <div class='col-md-12 mark_header_container'>
                    <div class="numerator-element">
                        <span class="numerator-content">{{ index + 1 }}</span>
                    </div>
                    <div class="remove-button" v-on:click="removeMark(index)">
                    </div>
                </div>

                <div class='col-md-6'>
                    <TextField :element-id='"term_textfield" + index' :message="item.term" type='text' placeholder="Kenmerk / element / fase"></TextField>
                </div>

                <div class='col-md-6'>
                    <TextField :element-id='"desc_textfield" + index ' :optional="true" :message="item.description" type='text' placeholder="Beschrijving (optioneel)" multiline="true"></TextField>
                </div>


            </div>
        </div>

        <div class='row'>

            <div class='col-md-6'>
               <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="order_check">
                    <label class="form-check-label" for="order_check">Volgorde van belang (bij fases)</label>
                </div>
            </div>
            <div class='col-md-6 right_column'>
                <a href="#" v-on:click="addMark">Nieuwe rij toevoegen</a>
            </div>
        </div>
    </div>
</template>
<script>


import TextField from './TextField.vue'
export default {
    props: ['elements'],
    name: 'ElementsView', 
    components: {
        TextField
    },
    data() {
        return {
            marks: [{}]
        }
    },
    mounted() {
        if (this.elements) {
            if (this.elements.length > 0) {
                 this.marks = this.elements;
            }
        }

    },
    methods: {
        addMark: function (e) {
            this.marks.push({ 'term': '', 'description': ''}); //I thought the issue might be related to having undefined values, so I changed it to empty strings
        }, 
        removeMark: function(index) {
            //this.marks = [{ 'term': 'term1', 'description': 'desc1'}, { 'term': 'term12', 'description': 'desc13'}]

            this.marks.splice(index, 1);
        }
    }
}

</script>

TextField.vue

<template>
  <div class="form-group">
    <label v-if="title" :for="elementId">{{title}}</label>

    <textarea v-if="multiline" v-bind:class="{ optional: optional }" rows="1" :type="type" class="form-control" :id="elementId" :aria-describedby="elementId + '_help'"  :placeholder="placeholder" v-model="messageValue"></textarea>
    <Input :value="message" v-bind:class="{ optional: optional }" v-else rows="1" :type="type" class="form-control" :id="elementId" :aria-describedby="elementId + '_help'"  :placeholder="placeholder"/>

      <small v-if="help" :id="elementId + '_help'" class="form-text text-muted">{{help}}</small>
  </div>
</template>

<script>

import autosize from 'autosize';

export default {
  props: ['elementId', 'type', 'title', 'help', 'placeholder', 'multiline', 'message', 'optional'],
  name: 'TextField',
  data() {
      return {
          messageValue: this.message
      }
  },
  mounted() {
      var root = this.$el;
      var textAreas = root.getElementsByTagName("TextArea");
      if (textAreas.length > 0) {
            var area = textAreas[0];
            autosize(area);
        }
  }
}
</script>

我想在起点处有一个空行，代码中用标记:[{}] 表示。每当用户想要添加新行时，都会将一个新的空 json 对象添加到数组中。这工作正常，但是删除对象会导致错误。

该数组由未绑定(bind)到行元素中的任何输入的空对象组成，因此该数组由空 JSON 对象组成。因此，我希望界面在删除元素后重新呈现行元素的数量 - 1，并且不显示用户之前编写的任何文本。

事实并非如此，即使新对象为空，用户先前输入的输入仍然可见。对于 addMark 函数(这不是问题，但不是我所期望的)和 removeMark 函数(我看到随机行消失)都会发生这种情况。

最初我假设有必要在改变列表之前更新列表所依赖的数据，因为这会强制使用数据对象中的数组重新绘制它。

为了测试这个假设，我尝试在 removeMark 函数中分配一个不同的数组(仅用于测试目的)，看看会发生什么。当输入未被修改时，这似乎部分起作用，但当输入被修改时，这个新数组值将被覆盖。

有人可以指出我做错了什么吗？

Answer 1

问题是这一行:

<div class='row' v-for="(item, index) in marks" v-bind:key="index">

您正在将数组的索引作为标识符绑定(bind)到呈现的条目。这将不起作用，因为当删除另一个项目时，项目的索引会发生变化。这解释了看似随机的行为。事实上，重新渲染无法正常工作。

如果您有一个唯一标识符，您可以使用它。如果条目 term 是唯一的:

<div class='row' v-for="(item, index) in marks" v-bind:key="item.term">

如果 term 不是唯一的，您可以自己创建一个 id 并将其用作键:

<div class='row' v-for="(item, index) in marks" v-bind:key="item.id">

对于唯一的、丢弃当前时间戳的 id 是实用的。更改 addMark 以创建 id:

addMark: function (e) {
    this.marks.push({ 'term': '', 'description': '', id: (new Date()).valueOf() });
}