我有一个搜索栏，当我按backspace时，它不会更新

const searchInput = document.getElementById('search-input');

searchInput.addEventListener('input', function(event) {
    console.log('Input changed:', event.target.value);
    // 这里可以添加更新搜索结果的逻辑
});

import React, { useState } from 'react';

function SearchBar() {
    const [searchTerm, setSearchTerm] = useState('');

    const handleChange = (event) => {
        setSearchTerm(event.target.value);
        // 这里可以添加更新搜索结果的逻辑
    };

    return (
        <input
            type="text"
            value={searchTerm}
            onChange={handleChange}
            placeholder="Search..."
        />
    );
}

export default SearchBar;

<template>
  <input type="text" v-model="searchTerm" placeholder="Search..." />
</template>

<script>
export default {
  data() {
    return {
      searchTerm: ''
    };
  },
  watch: {
    searchTerm(newVal) {
      console.log('Search term changed:', newVal);
      // 这里可以添加更新搜索结果的逻辑
    }
  }
};
</script>