Saya mempunyai komponen Vue 1 ini yang mendapat objek sebagai prop yang mesti diisi oleh pengguna.

Objek mempunyai struktur berikut:

{
    property1: ...,
    property2: ...,
    inputs: {
        2130: { value: ..., comment: ... },
        2131: { ... },
        ...,
    }

}

Komponen ialah modal mudah dengan borang yang mengandungi semua input yang diperlukan. Saya ingin menyemak beberapa kandungan, melakukan pengiraan dan menukar gaya sel berdasarkan input pengguna.

Apabila modal dimuatkan, saya membina halaman, menetapkan model untuk input ini menggunakan idnya:

v-model="object.inputs[subgroup[1].dx.mob.id].comment"

(Nota: subgroup[1]是包含表结构“定义”的另一个对象的一部分，通过执行 inputs[subgroup[1].dx.mob.id] Saya menjangkakan medan jadual yang dipautkan dengan input objek yang sepadan)

Masalahnya, tidak kira apa yang saya cuba, halaman itu tidak dipaparkan semula. <input> Medan itu tidak menyimpan nilai, ia hilang sebaik sahaja saya mengkliknya.

Apa yang lebih pelik ialah nilai sebenarnya telah ditetapkan, tetapi satu-satunya cara untuk membuat komponen itu dipaparkan semula dan melakukan semua pemeriksaan dan penggayaan yang baik yang saya perlukan dia lakukan ialah dengan menutup dan membuka semula modal atau dengan menetapkannya atas meja ibu bapa v-if.

Ini jelas bukan pilihan yang boleh dilaksanakan

• Saya memerlukan halaman untuk responsif
• Mencipta semula komponen (pada setiap perubahan input) mengambil terlalu banyak masa

Ini yang saya cuba:

• Bina pemerhati secara dinamik untuk setiap input
  • Tetapi vm.$watch objek itu tidak dapat ditemui atas sebab tertentu.

...forEach((input, index)=>{
    vm.$watch(`object.inputs[${index}].comment`, function(){
            this.$forceUpdate();
        })
}

• Kembalikan input dalam harta yang dikira dan amati

  • Tetapi halaman tidak dapat mengesan perubahan

• Mulakan secara manual pada acara @change dan @input this.$forceUpdate()

  • Tetapi $forceUpdate bukan fungsi

• Isytiharkan pembilang dalam data dan naikkannya pada acara @perubahan dan @input.

  • Tetapi halaman masih tidak dikemas kini.

• Letakkan v-if pada objek yang tidak kelihatan

  • Tetapi hanya objek tersebut yang dipaparkan semula

• Gunakan atribut data untuk menukar atribut :key bagi komponen

  • Tetapi tiada apa yang berlaku

Seperti yang dijangkakan, satu-satunya cara yang boleh saya lakukan adalah dengan memusnahkan dan mencipta semula komponen tersebut.

Ada sesiapa ada penyelesaian?

Penyelesaian Hodoh: Selepas beberapa percubaan yang gagal, saya menemui sesuatu yang berkesan, walaupun dengan cara yang salah. mana-mana yang sebenar Jawapan masih sangat dialu-alukan.

Pada asasnya, saya berjaya memaksa komponen untuk memaparkan semula:

• Isytiharkan pembolehubah baharu dalam data, saya menamakannya key (dalam kes saya ia adalah nombor, tetapi apa-apa pun boleh)
• Buat fungsi kemas kini yang menukar update 函数，将 key daripada 1 kepada 0 dan sebaliknya.
• Ikat fungsi ini pada setiap input atau pilihan @blur acara
• Memandangkan keseluruhan modal saya dipaparkan berdasarkan sifat yang dikira, saya melakukan beberapa bacaan pada key di dalam fungsi itu (dalam Kes saya ialah saya memberikan nilainya kepada pembolehubah baharu dan kemudian logkannya (bukan Menentukan yang mana satu daripada dua pencetus rendering, tetapi saya rasa yang pertama adalah Cukup))

... 
data: function() {
      return {
        ... ,
        key: 0
      };   
},

...

methods: {
    ... ,
    update: function(){
        this.key = this.key == 0 ? 1 : 0
    }
},
computed: {
    ... ,
    testData: function () { //this functions builds an object that is used to render the page  
        var data = []
        var __self = this
        var blu = this.key // This is the line where i read key
        console.log(blu)
        this.test.inputs.forEach(function(input){

            var slug = input.slug.replaceAll('#', '').split('-')
        
            __self.setItem(data, slug, input)

        })
     
        console.log('data', data)
        return data // this value gets then passed to Object.entries() to get an iterable object I build the page with
    } 
}