Vuejs 클래스를 행에 바인드 한 다음 나중에 행을 숨기거나 표시 하시겠습니까?

Question

사용자가 행을 숨기고 다른 행을 삭제할 때 숨길 수있는 테이블을 만들려고합니다.

<tr v-for="item in mylist" :class="{'noFruits': (item.fruits.length == 0)}"> 

클래스와 행 숨기기 위해 사용자의 체크 박스가 : 내 뷰 인스턴스에서

<label><input type="checkbox" v-model="showBlankFruits" @change="setBlankDisplay">Show Blank Fruits</label> 

가 테이블을 렌더링 할 때 내 HTML에서

나는 클래스를 바인딩 vuejs를 사용 확인란은 CSS 표시 속성을 첨부하기 위해 jquery를 통해 해당 클래스가있는 행을 숨기거나 표시하는 메소드를 실행합니다.

methods: { 
    setBlankDisplay: function() { 
    if (this.showBlankFruits) { 
    $('.noFruits').css('display', ''); 
    } else { 
    $('.noFruits').css('display', 'none'); 
    } 
}, 

내 jsfiddle에서 사용자가 행을 삭제하면 숨겨진 행이 다시 나타납니다. 나는이 인스턴스에서 jquery로 스타일을 첨부하는 것이 좋지 않다는 것을 알고있다 ... 더 좋은 방법에 대한 제안을 누군가가 가지고 있는가?

Answer 1

Vue와 jQuery를 함께 사용하는 것은 권장하지 않습니다. Vue를 사용하여 모든 것을 할 수 있고 다른 라이브러리/프레임 워크가하는 작업을 모르는 충돌 작업을 수행하지 않기 때문입니다.

과일의 배열 길이 하나가 다른 단어하지 0, truthy 경우, 또는 다음은 행을 표시합니다 showBlankFruits 사실 인 경우 체크 박스를 클릭하면

<tr v-for="item in mylist" v-show="item.fruits.length || showBlankFruits"> 

다음은 showBlankFruits를 전환합니다

<label><input type="checkbox" v-model="showBlankFruits">Show Blank Fruits</label> 

전체 코드 예제 :

JSFiddle

Answer 2

이것은 구성 요소에서 DOM 조작을 사용하는 대신 선언적 렌더링의 강력한 예입니다. 실행중인 문제는 Vue 엔진이 setBlankDisplay 메소드에서 수행 한 elemets의 수동 조작에 대해 알지 못하는 목록을 다시 렌더링 할 때입니다. 이를 해결하는 방법은 뷰 자체의 정의에 컴포넌트 로직을 사용하는 것입니다. 먼저 noFruits 클래스를 설정 한 것과 같습니다.

itemDisplay(item) { 
    if (item.fruits.length === 0 && !this.showBlankFruits) { 
    return 'none'; 
    } 
    return ''; 
}, 

그런 다음 당신이 그렇게처럼 CSS display 속성에 연결하여 tr 요소의 정의를 참조 할 수 있습니다 :

그래서, 난 당신이 setBlankDisplay 없애과 방법으로 대체 제안

<tr v-for="item in mylist" :class="{'noFruits': (item.fruits.length == 0)}" :style="{display: itemDisplay(item)}"> 

나는이 수정으로 jsfiddle을 업데이트하여 다른 항목이 삭제 될 때 숨겨진 과일 상태가 유지된다는 것을 보여줍니다.

jquery를 사용하여보기의 상태를 변경하는 위험의 일반적인 예로 이것을 사용하십시오. 컴포넌트 로직 측면에서 전체 뷰를 정의하기 위해 모든 노력을 기울여야합니다.

Answer 3

다음과 같이 작성할 수도 있습니다. 저는 계산을 사용하고 jQuery 부분을 완전히 제거했습니다. 당신은 함수 대신의 데이터 객체 (https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function) 당신은 이 초기 상태를 설정하는 방법을 장착 호출 할 필요는 없습니다

로 데이터를 선언해야합니다. 이미 데이터 객체로 설정되어 있습니다. jQuery는 DOM이로드 될 때만 결과를 숨길 수 있기 때문에 코드에서 마 운트를 호출해야합니다.

new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     showBlankFruits: true, 
 
     mylist: [ 
 
     {'user': 'Alice', 'fruits': [{'name': 'apple'}]}, 
 
     {'user': 'Bob', 'fruits': [{'name': 'orange'}]}, 
 
     {'user': 'Charlie', 'fruits': []}, 
 
     {'user': 'Denise', 'fruits': [{'name': 'apple'}, {'name': 'orange'}]}, 
 
     ] 
 
    } 
 
    }, 
 
    computed: { 
 
    list() { 
 
     return this.mylist.filter(item => (item.fruits.length > 0 && !this.showBlankFruits) || (item.fruits.length === 0 && this.showBlankFruits)) 
 
    }, 
 
    }, 
 
    methods: { 
 
    delItem(item) { 
 
     let index = this.mylist.indexOf(item); 
 
     if (index > -1) { 
 
     this.mylist.splice(index, 1); 
 
     } 
 
    } 
 
    } 
 
})

<script src="https://unpkg.com/vue"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<div id="app"> 
 
    <label><input type="checkbox" v-model="showBlankFruits">Show Blank Fruits</label> 
 
    <br> <br> 
 
    <table> 
 
    <tr> <th class="col">User</th> <th class="col">Fruits</th> <th class="col"></th> </tr> 
 
    <tr v-for="item in list"> 
 
     <td>{{ item.user }}</td> 
 
     <td> <span v-for="f in item.fruits"> {{ f.name }} </span> </td> 
 
     <td> <button @click="delItem(item)">Delete</button> </td> 
 
    </tr> 
 
    </table> 
 
</div>