Vuej는 클래스를 행에 바인드한 후 나중에 행을 숨기거나 표시합니까?

Vuej는 클래스를 행에 바인드한 후 나중에 행을 숨기거나 표시합니까?

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

html에서는 테이블을 렌더링할 때 vuejs를 사용하여 클래스를 바인드합니다.

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

내 Vue 인스턴스에서 이 체크박스는 jquery를 통해 해당 클래스의 행을 숨기거나 표시하는 메서드를 실행하여 css 표시 속성을 부가합니다.

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

jsfiddle에서는 사용자가 행을 삭제하면 숨겨진 행이 다시 나타납니다.이 경우 jquery로 스타일을 연결하는 것은 좋지 않습니다.더 나은 방법을 제안할 수 있는 사람 있나요?

Vue와 jQuery를 혼재시키는 것은 권장되지 않습니다.Vue를 사용하면 거의 모든 작업을 수행할 수 있고 다른 라이브러리/프레임워크가 무엇을 하는지 알 수 없는 충돌하는 작업이 발생하지 않습니다.

다음은 fruits 배열 길이가 truthy, 즉0이 아닌 경우 또는 showBlankFruits가 true인 경우 행을 보여줍니다.

<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

이런 것도 쓸 수 있어요.계산된 jQuery 부분을 완전히 제거했습니다.데이터는 데이터 오브젝트가 아닌 함수로 선언해야 합니다(https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function)

초기 상태를 설정하기 위해 마운트된 메서드를 호출할 필요는 없습니다.데이터 개체로 이미 설정되어 있습니다.코드에서는 DOM이 로드될 때만 jQuery가 결과를 숨길 수 있으므로 마운트된 상태로 호출해야 합니다.

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>

이것은 컴포넌트에서 DOM 조작을 사용하는 것이 아니라 선언적 렌더링의 성능을 보여주는 좋은 예입니다. 것은 Vue 렌더링할 때 Vue 엔진에서 입니다.setBlankDisplay 를 회피하는 은 예를 들어, '어울릴 때'를 설정할 처럼, 뷰입니다.예를 들어, 예를 들면, 이 뷰의 설정을 실시했을 때와 같습니다.noFruits을 사용하다

, 나는 네가 이 일을 을 제안해.setBlankDisplay하다

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

다음 ''의 할 수 있습니다.tr css에 display다음과 같은 속성:

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

이 수정으로 jsfiddle을 업데이트하여 다른 아이템을 삭제해도 숨겨진 과일 상태가 유지됨을 알 수 있습니다.

이를 jquery를 사용하여 뷰 상태를 변경하는 경우의 위험성에 대한 일반적인 예로 사용합니다.컴포넌트 로직의 관점에서 전체 뷰를 정의하기 위해 모든 노력을 기울여야 합니다.

언급URL : https://stackoverflow.com/questions/47871444/vuejs-bind-class-to-row-then-later-hide-show-the-row