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)
},

绑定的值在组件内部被修改，但是没有使用 Vue.set 或 this.$set 方法来更新，导致变化无法被Vue 监测到。

<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)

其值是只读属性

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

猜你喜欢