vue v-model失效原因及解决方案

点击全文阅读

<template>  <div>    <input v-model="name" />    <button @click="updateName">Update Name</button>  </div></template><script>export default {  data() {    return {      name: 'John',    }  },  methods: {    updateName() {      setTimeout(() => {        this.name = 'Jane' // 异步更新 name 值      }, 1000)    },  },}</script>

解决方案：
可以使用 Promise 或 async/await 等方式来等待异步操作完成后再更新数据，或者使用 Vue.nextTick 方法来确保 DOM 已经更新。

updateName() {  // 使用 Promise  setTimeout(() => {    this.name = 'Jane' // 异步更新 name 值  }, 1000).then(() => {    this.$nextTick(() => {      console.log(this.$el.querySelector('input').value) // 输出 'Jane'    })  })  // 使用 async/await  setTimeout(async () => {    this.name = 'Jane' // 异步更新 name 值    await this.$nextTick()    console.log(this.$el.querySelector('input').value) // 输出 'Jane'  }, 1000)},

<template>  <div>    <div v-for="(item, index) in list" :key="index">      <input v-model="item.name" />    </div>    <button @click="addNewItem">Add New Item</button>  </div></template><script>export default {  data() {    return {      list: [        { name: 'John' },        { name: 'Jane' },      ],    }  },  methods: {    addNewItem() {      const newItem = { name: 'New Item' }      this.list.push(newItem) // 修改 list 数组，但是没有使用 Vue.set 或 this.$set 方法      // this.$set(this.list, this.list.length, newItem) // 使用 this.$set 方法更新数组，使其能够被 Vue 监测到    },  },}</script>

解决方案：当需要修改一个数组或对象中的某个元素时，应该使用 Vue.set 或 this.$set 方法来更新

this.$set(this.list, this.list.length, newItem) 

点击全文阅读