필터링/검색 문제 후 입력 변경 - VueJs

필터링/검색 문제 후 입력 변경 - VueJs

나는 VueJS의 신입이고 이 기능을 다룰 충분한 경험이 없다.
그래서 나는 질문을 만들어낸다(그 질문은 중복될 수 있다).

예를 들어 나는 사용했다.computed주 필터/검색 기능을 처리하다

computed: {
  filteredProducts: function () {
    return this.products.filter(product => product.name.includes(this.filter.name));
  }
}

다음 단계에서는 다음과 같은 제품 목록을 렌더링한다.v-for지시, 사용filteredProducts

<div v-for="product in filteredProducts" :key="product.id">
  <input type="text" v-model="product.name" />
</div>

다른 텍스트 상자도 있는데, 사용자가 제품 이름으로 검색하기 위해 입력할 수 있다.

<input type="text" v-model="filter.name" />

검색 입력에 입력함으로써 제품 목록이 적절하게 갱신되고 있다.
제품 이름 입력에서 일부 문자를 제거하려고 하면 입력 내용이 목록에서 사라진다.
입력이 편집에 계속 나타나도록 하는 가장 좋은 방법은 무엇인가?

제품 이름을 편집할 때 유지하려면:value대신에v-model입력 필드를 편집할 때 제품 이름을 변경하지 않도록 하십시오. v-model양방향 데이터 바인딩이며:value단방향 데이터 바인딩.그들의 차이에 대한 자세한 내용은 여기를 참조하십시오.

<div v-for="product in filteredProducts" :key="product.id">
  <input type="text" :value="product.name" />
</div>

<input type="text" v-model="filter.name" />

참조URL: https://stackoverflow.com/questions/63954005/change-inputs-after-filtered-searched-problems-vuejs