Vue.js 輸入值在修改數據后不更新

Question

我剛開始使用 Vue.js，但在 Vue.js 響應式數據源方面遇到了一些問題。

以下代碼應該能夠在父元素中添加和刪除包含文本字段和文本區域的行。

元素視圖.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>

文本字段.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 對象添加到數組中。 這工作正常，但是刪除對象會導致錯誤。

該數組由未綁定到行元素中的任何輸入的空對象組成，因此該數組由空的 JSON 對象組成。 因此，我希望界面重新呈現行元素的數量 - 刪除元素后為 1，並且不顯示用戶之前編寫的任何文本。

情況並非如此，即使新對象為空，用戶先前輸入的輸入仍然可見。 這對於 addMark 函數（這不是問題，但不是我所期望的）和 removeMark 函數（我看到隨機行消失）都會發生。

最初我認為有必要在改變列表之前更新列表所依賴的數據，因為這將迫使它使用數據對象中的數組重新繪制。

為了測試這個假設，我嘗試在 removeMark 函數中分配一個不同的數組（僅用於測試目的），看看會發生什么。 當輸入未被修改時，這似乎部分起作用，但是當輸入被修改時，這個新的數組值被覆蓋。

有人可以指出我做錯了什么嗎？

Answer 1

問題是這一行：

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

您將數組的索引作為標識符綁定到呈現的條目。 這將不起作用，因為刪除另一個項目時項目的索引會發生變化。 這解釋了看似隨機的行為。 事實上，重新渲染不能正常工作。

如果你有一個唯一標識符，你可以使用它。 如果條目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() });
}